← Back to Editor

#FFC6BB · #FFF7C4 · #C2C79F · #5D7479 · #708D8C

sunset

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#FFC6BB

Peach Pink · Pink · Cherry Blossom

HEX
#FFC6BB
RGB
rgb(255, 198, 187)
HSL
hsl(10, 100%, 87%)
HSB
hsb(10, 27%, 100%)
CMYK
cmyk(0%, 22%, 27%, 0%)
Oklch
oklch(87.4% 0.067 31.0)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#FFF7C4

Fresh Green · Bisque · Lemon Cream

HEX
#FFF7C4
RGB
rgb(255, 247, 196)
HSL
hsl(52, 100%, 88%)
HSB
hsb(52, 23%, 100%)
CMYK
cmyk(0%, 3%, 23%, 0%)
Oklch
oklch(97.0% 0.066 100.1)

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

#C2C79F

Fresh Green · Tan · Sunflower

HEX
#C2C79F
RGB
rgb(194, 199, 159)
HSL
hsl(68, 26%, 70%)
HSB
hsb(68, 20%, 78%)
CMYK
cmyk(3%, 0%, 20%, 22%)
Oklch
oklch(81.5% 0.054 113.4)

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

#5D7479

Slate Blue · DimGray · Mint Ice

HEX
#5D7479
RGB
rgb(93, 116, 121)
HSL
hsl(191, 13%, 42%)
HSB
hsb(191, 23%, 47%)
CMYK
cmyk(23%, 4%, 0%, 53%)
Oklch
oklch(54.2% 0.028 212.4)

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

#708D8C

Mineral Blue · SlateGray · Mint Ice

HEX
#708D8C
RGB
rgb(112, 141, 140)
HSL
hsl(178, 11%, 50%)
HSB
hsb(178, 21%, 55%)
CMYK
cmyk(21%, 0%, 1%, 45%)
Oklch
oklch(62.1% 0.033 193.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFC6BB
BDF4FF

Analogous

FFBDD3
FFC6BB
FFE9BD

Triadic

FFC6BB
BDFFC8
C8BDFF

Split-Comp.

FFC6BB
BDFFE9
BDD3FF

Tetradic

FFC6BB
D3FFBD
BDF4FF
E9BDFF

Contrast Matrix WCAG 2.1 Contrast

FFC6BB
FFF7C4
C2C79F
5D7479
708D8C
—
1.4
Fail
1.2
Fail
3.3
AA Large
2.4
Fail
1.4
Fail
—
1.6
Fail
4.6
AA
3.3
AA Large
1.2
Fail
1.6
Fail
—
2.8
Fail
2.0
Fail
3.3
AA Large
4.6
AA
2.8
Fail
—
1.4
Fail
2.4
Fail
3.3
AA Large
2.0
Fail
1.4
Fail
—
White BG
1.5Fail
1.1Fail
1.8Fail
5.0AA
3.6AA Large
Black BG
14.0AAA
19.4AAA
12.0AAA
4.2AA Large
5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E6BE
FCFBD0
C4C4A9
676778
7D7D8C

Deuteranopia

EAEEBE
FCFDD3
C4C3AB
666477
7B798C

Tritanopia

FCC0C0
FFDADC
C2B0B2
5E7777
718C8C

Achromatopsia

D6D6D6
F4F4F4
C1C1C1
6E6E6E
848484

Shades & Tints Shades & Tints

#FFC6BB

Dark
Light

#FFF7C4

Dark
Light

#C2C79F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffc6bb;
  --color-2: #fff7c4;
  --color-3: #c2c79f;
  --color-4: #5d7479;
  --color-5: #708d8c;
}

SCSS

$color-1: #ffc6bb;
$color-2: #fff7c4;
$color-3: #c2c79f;
$color-4: #5d7479;
$color-5: #708d8c;

TAILWIND

colors: {
  'brand-1': '#ffc6bb',
  'brand-2': '#fff7c4',
  'brand-3': '#c2c79f',
  'brand-4': '#5d7479',
  'brand-5': '#708d8c',
}

RGB Array

[255, 198, 187], [255, 247, 196], [194, 199, 159], [93, 116, 121], [112, 141, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #FFC6BB, #FFF7C4, #C2C79F, #5D7479, #708D8C is ideal for: health products, baby brands, fresh-style blogs, 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: #ffc6bb; --color-2: #fff7c4; --color-3: #c2c79f; --color-4: #5d7479; --color-5: #708d8c. 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 sunset-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