← Back to Editor

#CAAC66 · #EADB91 · #F7F7F2 · #819FAA · #164E71

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

#CAAC66

Ginger · Tan · Sunflower

HEX
#CAAC66
RGB
rgb(202, 172, 102)
HSL
hsl(42, 49%, 60%)
HSB
hsb(42, 50%, 79%)
CMYK
cmyk(0%, 15%, 50%, 21%)
Oklch
oklch(75.6% 0.096 86.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#EADB91

Fresh Green · Khaki · Sunflower

HEX
#EADB91
RGB
rgb(234, 219, 145)
HSL
hsl(50, 68%, 74%)
HSB
hsb(50, 38%, 92%)
CMYK
cmyk(0%, 6%, 38%, 8%)
Oklch
oklch(88.7% 0.095 98.1)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#F7F7F2

Fresh Green · SeaShell · Lemon Cream

HEX
#F7F7F2
RGB
rgb(247, 247, 242)
HSL
hsl(60, 24%, 96%)
HSB
hsb(60, 2%, 97%)
CMYK
cmyk(0%, 0%, 2%, 3%)
Oklch
oklch(97.5% 0.007 106.5)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#819FAA

Slate Blue · LightSlateGray · Lake Green

HEX
#819FAA
RGB
rgb(129, 159, 170)
HSL
hsl(196, 19%, 59%)
HSB
hsb(196, 24%, 67%)
CMYK
cmyk(24%, 6%, 0%, 33%)
Oklch
oklch(68.4% 0.037 222.1)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#164E71

Lake Blue · DarkSlateGray · Prussian Blue

HEX
#164E71
RGB
rgb(22, 78, 113)
HSL
hsl(203, 67%, 26%)
HSB
hsb(203, 81%, 44%)
CMYK
cmyk(81%, 31%, 0%, 56%)
Oklch
oklch(40.6% 0.082 241.0)

Traditional「Lake Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CAAC66
6785CB

Analogous

CB7B67
CAAC66
B7CB67

Triadic

CAAC66
67CBAD
AD67CB

Split-Comp.

CAAC66
67B7CB
7B67CB

Tetradic

CAAC66
67CB7B
6785CB
CB67B7

Contrast Matrix WCAG 2.1 Contrast

CAAC66
EADB91
F7F7F2
819FAA
164E71
—
1.6
Fail
2.0
Fail
1.3
Fail
4.1
AA Large
1.6
Fail
—
1.3
Fail
2.0
Fail
6.4
AA
2.0
Fail
1.3
Fail
—
2.6
Fail
8.3
AAA
1.3
Fail
2.0
Fail
2.6
Fail
—
3.2
AA Large
4.1
AA Large
6.4
AA
8.3
AAA
3.2
AA Large
—
White BG
2.2Fail
1.4Fail
1.1Fail
2.8Fail
8.9AAA
Black BG
9.6AAA
15.0AAA
19.5AAA
7.5AAA
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBD77
E4E3A3
F7F7F3
8E8EA7
2E2F69

Deuteranopia

BFC17B
E4E6A7
F7F7F3
8C8AA7
2B2767

Tritanopia

C88487
E9B1B4
F7F4F4
83A5A5
196260

Achromatopsia

ADADAD
D7D7D7
F6F6F6
979797
414141

Shades & Tints Shades & Tints

#CAAC66

Dark
Light

#EADB91

Dark
Light

#F7F7F2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #caac66;
  --color-2: #eadb91;
  --color-3: #f7f7f2;
  --color-4: #819faa;
  --color-5: #164e71;
}

SCSS

$color-1: #caac66;
$color-2: #eadb91;
$color-3: #f7f7f2;
$color-4: #819faa;
$color-5: #164e71;

TAILWIND

colors: {
  'brand-1': '#caac66',
  'brand-2': '#eadb91',
  'brand-3': '#f7f7f2',
  'brand-4': '#819faa',
  'brand-5': '#164e71',
}

RGB Array

[202, 172, 102], [234, 219, 145], [247, 247, 242], [129, 159, 170], [22, 78, 113]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CAAC66, #EADB91, #F7F7F2, #819FAA, #164E71 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: #caac66; --color-2: #eadb91; --color-3: #f7f7f2; --color-4: #819faa; --color-5: #164e71. 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