← Back to Editor

#668888 · #FFEEBB · #FFFFDD · #FFCCBB · #CCCCAA

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#668888

Slate Blue · SlateGray · Mint Ice

HEX
#668888
RGB
rgb(102, 136, 136)
HSL
hsl(180, 14%, 47%)
HSB
hsb(180, 25%, 53%)
CMYK
cmyk(25%, 0%, 0%, 47%)
Oklch
oklch(60.1% 0.038 196.2)

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

#FFEEBB

Goose Yellow · Bisque · Lemon Cream

HEX
#FFEEBB
RGB
rgb(255, 238, 187)
HSL
hsl(45, 100%, 87%)
HSB
hsb(45, 27%, 100%)
CMYK
cmyk(0%, 7%, 27%, 0%)
Oklch
oklch(95.0% 0.068 91.8)

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

#FFFFDD

Fresh Green · LightYellow · Lemon Cream

HEX
#FFFFDD
RGB
rgb(255, 255, 221)
HSL
hsl(60, 100%, 93%)
HSB
hsb(60, 13%, 100%)
CMYK
cmyk(0%, 0%, 13%, 0%)
Oklch
oklch(99.1% 0.044 107.2)

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

#FFCCBB

Apricot · Pink · Peach Orange

HEX
#FFCCBB
RGB
rgb(255, 204, 187)
HSL
hsl(15, 100%, 87%)
HSB
hsb(15, 27%, 100%)
CMYK
cmyk(0%, 20%, 27%, 0%)
Oklch
oklch(88.5% 0.063 39.2)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#CCCCAA

Fresh Green · Silver · Sunflower

HEX
#CCCCAA
RGB
rgb(204, 204, 170)
HSL
hsl(60, 25%, 73%)
HSB
hsb(60, 17%, 80%)
CMYK
cmyk(0%, 0%, 17%, 20%)
Oklch
oklch(83.6% 0.046 107.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

668888
896767

Analogous

678978
668888
677889

Triadic

668888
896789
898967

Split-Comp.

668888
896778
897867

Tetradic

668888
786789
896767
788967

Contrast Matrix WCAG 2.1 Contrast

668888
FFEEBB
FFFFDD
FFCCBB
CCCCAA
—
3.3
AA Large
3.8
AA Large
2.7
Fail
2.3
Fail
3.3
AA Large
—
1.1
Fail
1.2
Fail
1.4
Fail
3.8
AA Large
1.1
Fail
—
1.4
Fail
1.6
Fail
2.7
Fail
1.2
Fail
1.4
Fail
—
1.1
Fail
2.3
Fail
1.4
Fail
1.6
Fail
1.1
Fail
—
White BG
3.9AA Large
1.2Fail
1.0Fail
1.4Fail
1.6Fail
Black BG
5.4AA
18.2AAA
20.6AAA
14.6AAA
12.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

757588
F8F7C7
FFFFE5
E9E8BF
CCCCB2

Deuteranopia

737088
F9FACA
FFFFE7
ECF0C0
CCCCB4

Tritanopia

688888
FED1D3
FFECED
FCC2C3
CCB9BA

Achromatopsia

7E7E7E
EDEDED
FBFBFB
D9D9D9
C8C8C8

Shades & Tints Shades & Tints

#668888

Dark
Light

#FFEEBB

Dark
Light

#FFFFDD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #668888;
  --color-2: #ffeebb;
  --color-3: #ffffdd;
  --color-4: #ffccbb;
  --color-5: #ccccaa;
}

SCSS

$color-1: #668888;
$color-2: #ffeebb;
$color-3: #ffffdd;
$color-4: #ffccbb;
$color-5: #ccccaa;

TAILWIND

colors: {
  'brand-1': '#668888',
  'brand-2': '#ffeebb',
  'brand-3': '#ffffdd',
  'brand-4': '#ffccbb',
  'brand-5': '#ccccaa',
}

RGB Array

[102, 136, 136], [255, 238, 187], [255, 255, 221], [255, 204, 187], [204, 204, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #668888, #FFEEBB, #FFFFDD, #FFCCBB, #CCCCAA is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #668888; --color-2: #ffeebb; --color-3: #ffffdd; --color-4: #ffccbb; --color-5: #ccccaa. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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