← Back to Editor

#F5E9D9 · #CADBC9 · #33AA96 · #16812F · #D04C04

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F5E9D9

Goose Yellow · Beige · Peach Orange

HEX
#F5E9D9
RGB
rgb(245, 233, 217)
HSL
hsl(34, 58%, 91%)
HSB
hsb(34, 11%, 96%)
CMYK
cmyk(0%, 5%, 11%, 4%)
Oklch
oklch(93.9% 0.025 75.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#CADBC9

Celadon · LightGray · Mint Green

HEX
#CADBC9
RGB
rgb(202, 219, 201)
HSL
hsl(117, 20%, 82%)
HSB
hsb(117, 8%, 86%)
CMYK
cmyk(8%, 0%, 8%, 14%)
Oklch
oklch(87.4% 0.030 143.8)

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

#33AA96

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#33AA96
RGB
rgb(51, 170, 150)
HSL
hsl(170, 54%, 43%)
HSB
hsb(170, 70%, 67%)
CMYK
cmyk(70%, 0%, 12%, 33%)
Oklch
oklch(66.8% 0.108 179.1)

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

#16812F

Pine Green · ForestGreen · Forest Green

HEX
#16812F
RGB
rgb(22, 129, 47)
HSL
hsl(134, 71%, 30%)
HSB
hsb(134, 83%, 51%)
CMYK
cmyk(83%, 0%, 64%, 49%)
Oklch
oklch(52.8% 0.151 146.3)

Traditional「Pine Green」· Paint「Forest Green」· Creative Blush Sunrise

#D04C04

Tangerine · Chocolate · Amber Brown

HEX
#D04C04
RGB
rgb(208, 76, 4)
HSL
hsl(21, 96%, 42%)
HSB
hsb(21, 98%, 82%)
CMYK
cmyk(0%, 63%, 98%, 18%)
Oklch
oklch(59.0% 0.179 41.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5E9D9
DBE6F5

Analogous

F5DDDB
F5E9D9
F4F5DB

Triadic

F5E9D9
DBF5EA
EADBF5

Split-Comp.

F5E9D9
DBF4F5
DDDBF5

Tetradic

F5E9D9
DBF5DD
DBE6F5
F5DBF4

Contrast Matrix WCAG 2.1 Contrast

F5E9D9
CADBC9
33AA96
16812F
D04C04
—
1.2
Fail
2.4
Fail
4.2
AA Large
3.7
AA Large
1.2
Fail
—
2.0
Fail
3.4
AA Large
3.1
AA Large
2.4
Fail
2.0
Fail
—
1.7
Fail
1.6
Fail
4.2
AA Large
3.4
AA Large
1.7
Fail
—
1.1
Fail
3.7
AA Large
3.1
AA Large
1.6
Fail
1.1
Fail
—
White BG
1.2Fail
1.4Fail
2.9Fail
5.0AA
4.5AA Large
Black BG
17.5AAA
14.5AAA
7.3AAA
4.2AA Large
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F0F0DD
D1D2CD
67689B
444543
979615

Deuteranopia

F1F1DE
D0CFCE
60579C
3E3648
9FA81A

Tritanopia

F4E0E1
CBD1D2
399FA0
1B5356
C92326

Achromatopsia

EBEBEB
D4D4D4
848484
585858
6B6B6B

Shades & Tints Shades & Tints

#F5E9D9

Dark
Light

#CADBC9

Dark
Light

#33AA96

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5e9d9;
  --color-2: #cadbc9;
  --color-3: #33aa96;
  --color-4: #16812f;
  --color-5: #d04c04;
}

SCSS

$color-1: #f5e9d9;
$color-2: #cadbc9;
$color-3: #33aa96;
$color-4: #16812f;
$color-5: #d04c04;

TAILWIND

colors: {
  'brand-1': '#f5e9d9',
  'brand-2': '#cadbc9',
  'brand-3': '#33aa96',
  'brand-4': '#16812f',
  'brand-5': '#d04c04',
}

RGB Array

[245, 233, 217], [202, 219, 201], [51, 170, 150], [22, 129, 47], [208, 76, 4]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5E9D9, #CADBC9, #33AA96, #16812F, #D04C04 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #f5e9d9; --color-2: #cadbc9; --color-3: #33aa96; --color-4: #16812f; --color-5: #d04c04. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 general-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