← Back to Editor

#247F6E · #957043 · #C27A2E · #CD9443 · #DEB365

warm

A 5-color warm palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#247F6E

Mineral Blue · SeaGreen · Mint Ice

HEX
#247F6E
RGB
rgb(36, 127, 110)
HSL
hsl(169, 56%, 32%)
HSB
hsb(169, 72%, 50%)
CMYK
cmyk(72%, 0%, 13%, 50%)
Oklch
oklch(53.9% 0.088 177.6)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#957043

Ochre · Sienna · Amber Brown

HEX
#957043
RGB
rgb(149, 112, 67)
HSL
hsl(33, 38%, 42%)
HSB
hsb(33, 55%, 58%)
CMYK
cmyk(0%, 25%, 55%, 42%)
Oklch
oklch(57.2% 0.077 70.7)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#C27A2E

Ochre · Chocolate · Amber Brown

HEX
#C27A2E
RGB
rgb(194, 122, 46)
HSL
hsl(31, 62%, 47%)
HSB
hsb(31, 76%, 76%)
CMYK
cmyk(0%, 37%, 76%, 24%)
Oklch
oklch(64.3% 0.126 63.1)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#CD9443

Ginger · GoldenRod · Warm Sun

HEX
#CD9443
RGB
rgb(205, 148, 67)
HSL
hsl(35, 58%, 53%)
HSB
hsb(35, 67%, 80%)
CMYK
cmyk(0%, 28%, 67%, 20%)
Oklch
oklch(70.7% 0.119 73.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#DEB365

Ginger · SandyBrown · Warm Sun

HEX
#DEB365
RGB
rgb(222, 179, 101)
HSL
hsl(39, 65%, 63%)
HSB
hsb(39, 55%, 87%)
CMYK
cmyk(0%, 19%, 55%, 13%)
Oklch
oklch(78.9% 0.109 81.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

247F6E
7F2435

Analogous

247F41
247F6E
24627F

Triadic

247F6E
6F247F
7F6F24

Split-Comp.

247F6E
7F2462
7F4124

Tetradic

247F6E
41247F
7F2435
627F24

Contrast Matrix WCAG 2.1 Contrast

247F6E
957043
C27A2E
CD9443
DEB365
—
1.1
Fail
1.4
Fail
1.8
Fail
2.5
Fail
1.1
Fail
—
1.3
Fail
1.7
Fail
2.3
Fail
1.4
Fail
1.3
Fail
—
1.3
Fail
1.8
Fail
1.8
Fail
1.7
Fail
1.3
Fail
—
1.4
Fail
2.5
Fail
2.3
Fail
1.8
Fail
1.4
Fail
—
White BG
4.8AA
4.5AA Large
3.4AA Large
2.7Fail
2.0Fail
Black BG
4.3AA Large
4.7AA
6.1AA
7.9AAA
10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4B4C72
85854E
A3A240
B4B457
CBCB78

Deuteranopia

463F73
878A51
A7AC45
B8BC5B
CED17C

Tritanopia

297576
935658
BE4F52
CA6669
DC878A

Achromatopsia

626262
767676
878787
9C9C9C
B7B7B7

Shades & Tints Shades & Tints

#247F6E

Dark
Light

#957043

Dark
Light

#C27A2E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #247f6e;
  --color-2: #957043;
  --color-3: #c27a2e;
  --color-4: #cd9443;
  --color-5: #deb365;
}

SCSS

$color-1: #247f6e;
$color-2: #957043;
$color-3: #c27a2e;
$color-4: #cd9443;
$color-5: #deb365;

TAILWIND

colors: {
  'brand-1': '#247f6e',
  'brand-2': '#957043',
  'brand-3': '#c27a2e',
  'brand-4': '#cd9443',
  'brand-5': '#deb365',
}

RGB Array

[36, 127, 110], [149, 112, 67], [194, 122, 46], [205, 148, 67], [222, 179, 101]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #247F6E, #957043, #C27A2E, #CD9443, #DEB365 is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #247f6e; --color-2: #957043; --color-3: #c27a2e; --color-4: #cd9443; --color-5: #deb365. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This warm-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color