← Back to Editor

#F8E9C5 · #DF7915 · #CEAF72 · #589B85 · #B4C4B4

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

#F8E9C5

Goose Yellow · Bisque · Lemon Cream

HEX
#F8E9C5
RGB
rgb(248, 233, 197)
HSL
hsl(42, 78%, 87%)
HSB
hsb(42, 21%, 97%)
CMYK
cmyk(0%, 6%, 21%, 3%)
Oklch
oklch(93.7% 0.050 88.1)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#DF7915

Ochre · Chocolate · Amber Brown

HEX
#DF7915
RGB
rgb(223, 121, 21)
HSL
hsl(30, 83%, 48%)
HSB
hsb(30, 91%, 87%)
CMYK
cmyk(0%, 46%, 91%, 13%)
Oklch
oklch(67.8% 0.159 56.5)

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

#CEAF72

Ginger · Tan · Sunflower

HEX
#CEAF72
RGB
rgb(206, 175, 114)
HSL
hsl(40, 48%, 63%)
HSB
hsb(40, 45%, 81%)
CMYK
cmyk(0%, 15%, 45%, 19%)
Oklch
oklch(76.8% 0.087 83.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#589B85

Mineral Blue · CadetBlue · Mint Ice

HEX
#589B85
RGB
rgb(88, 155, 133)
HSL
hsl(160, 28%, 48%)
HSB
hsb(160, 43%, 61%)
CMYK
cmyk(43%, 0%, 14%, 39%)
Oklch
oklch(63.8% 0.077 170.6)

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

#B4C4B4

Celadon · Silver · Apple Green

HEX
#B4C4B4
RGB
rgb(180, 196, 180)
HSL
hsl(120, 12%, 74%)
HSB
hsb(120, 8%, 77%)
CMYK
cmyk(8%, 0%, 8%, 23%)
Oklch
oklch(80.3% 0.028 145.3)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8E9C5
C4D4F8

Analogous

F8CEC4
F8E9C5
EDF8C4

Triadic

F8E9C5
C4F8E8
E8C4F8

Split-Comp.

F8E9C5
C4EDF8
CEC4F8

Tetradic

F8E9C5
C4F8CE
C4D4F8
F8C4ED

Contrast Matrix WCAG 2.1 Contrast

F8E9C5
DF7915
CEAF72
589B85
B4C4B4
—
2.5
Fail
1.7
Fail
2.7
Fail
1.5
Fail
2.5
Fail
—
1.5
Fail
1.1
Fail
1.7
Fail
1.7
Fail
1.5
Fail
—
1.6
Fail
1.1
Fail
2.7
Fail
1.1
Fail
1.6
Fail
—
1.8
Fail
1.5
Fail
1.7
Fail
1.1
Fail
1.8
Fail
—
White BG
1.2Fail
3.1AA Large
2.1Fail
3.3AA Large
1.8Fail
Black BG
17.5AAA
6.9AA
10.0AAA
6.4AA
11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F1CE
B3B22D
C1C081
75768A
BBBBB8

Deuteranopia

F2F4D0
B9C033
C2C584
716C8C
BAB9B9

Tritanopia

F7D5D6
DA4045
CC8C8F
5B8F8F
B5BBBC

Achromatopsia

E9E9E9
8C8C8C
B1B1B1
848484
BDBDBD

Shades & Tints Shades & Tints

#F8E9C5

Dark
Light

#DF7915

Dark
Light

#CEAF72

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8e9c5;
  --color-2: #df7915;
  --color-3: #ceaf72;
  --color-4: #589b85;
  --color-5: #b4c4b4;
}

SCSS

$color-1: #f8e9c5;
$color-2: #df7915;
$color-3: #ceaf72;
$color-4: #589b85;
$color-5: #b4c4b4;

TAILWIND

colors: {
  'brand-1': '#f8e9c5',
  'brand-2': '#df7915',
  'brand-3': '#ceaf72',
  'brand-4': '#589b85',
  'brand-5': '#b4c4b4',
}

RGB Array

[248, 233, 197], [223, 121, 21], [206, 175, 114], [88, 155, 133], [180, 196, 180]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #F8E9C5, #DF7915, #CEAF72, #589B85, #B4C4B4 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: #f8e9c5; --color-2: #df7915; --color-3: #ceaf72; --color-4: #589b85; --color-5: #b4c4b4. 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