← Back to Editor

#27C9CF · #FAF7EB · #F2DD80 · #F7CD4F · #D97818

sunset

A 5-color sunset 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

#27C9CF

Lake Blue · Turquoise · Mint Ice

HEX
#27C9CF
RGB
rgb(39, 201, 207)
HSL
hsl(182, 68%, 48%)
HSB
hsb(182, 81%, 81%)
CMYK
cmyk(81%, 3%, 0%, 19%)
Oklch
oklch(76.2% 0.123 198.9)

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

#FAF7EB

Goose Yellow · SeaShell · Lemon Cream

HEX
#FAF7EB
RGB
rgb(250, 247, 235)
HSL
hsl(48, 60%, 95%)
HSB
hsb(48, 6%, 98%)
CMYK
cmyk(0%, 1%, 6%, 2%)
Oklch
oklch(97.5% 0.016 95.2)

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

#F2DD80

Goose Yellow · Khaki · Sunflower

HEX
#F2DD80
RGB
rgb(242, 221, 128)
HSL
hsl(49, 81%, 73%)
HSB
hsb(49, 47%, 95%)
CMYK
cmyk(0%, 9%, 47%, 5%)
Oklch
oklch(89.5% 0.116 97.0)

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

#F7CD4F

Ginger · SandyBrown · Sunflower

HEX
#F7CD4F
RGB
rgb(247, 205, 79)
HSL
hsl(45, 91%, 64%)
HSB
hsb(45, 68%, 97%)
CMYK
cmyk(0%, 17%, 68%, 3%)
Oklch
oklch(86.3% 0.148 90.3)

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

#D97818

Ochre · Chocolate · Amber Brown

HEX
#D97818
RGB
rgb(217, 120, 24)
HSL
hsl(30, 80%, 47%)
HSB
hsb(30, 89%, 85%)
CMYK
cmyk(0%, 45%, 89%, 15%)
Oklch
oklch(66.8% 0.154 57.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

27C9CF
CE2D27

Analogous

27CE80
27C9CF
2775CE

Triadic

27C9CF
CE27C8
C8CE27

Split-Comp.

27C9CF
CE2775
CE8027

Tetradic

27C9CF
8027CE
CE2D27
75CE27

Contrast Matrix WCAG 2.1 Contrast

27C9CF
FAF7EB
F2DD80
F7CD4F
D97818
—
1.9
Fail
1.5
Fail
1.3
Fail
1.6
Fail
1.9
Fail
—
1.3
Fail
1.4
Fail
2.9
Fail
1.5
Fail
1.3
Fail
—
1.1
Fail
2.3
Fail
1.3
Fail
1.4
Fail
1.1
Fail
—
2.1
Fail
1.6
Fail
2.9
Fail
2.3
Fail
2.1
Fail
—
White BG
2.0Fail
1.1Fail
1.4Fail
1.5Fail
3.2AA Large
Black BG
10.3AAA
19.6AAA
15.4AAA
13.8AAA
6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6D6FCE
F9F9EE
E9E997
E5E46D
AFAE2F

Deuteranopia

6458CD
F9F9EF
EAEC9C
E7EA75
B5BC35

Tritanopia

2FCCCC
FAF0F1
F1A8AC
F5868B
D44246

Achromatopsia

999999
F7F7F7
D9D9D9
CBCBCB
8A8A8A

Shades & Tints Shades & Tints

#27C9CF

Dark
Light

#FAF7EB

Dark
Light

#F2DD80

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #27c9cf;
  --color-2: #faf7eb;
  --color-3: #f2dd80;
  --color-4: #f7cd4f;
  --color-5: #d97818;
}

SCSS

$color-1: #27c9cf;
$color-2: #faf7eb;
$color-3: #f2dd80;
$color-4: #f7cd4f;
$color-5: #d97818;

TAILWIND

colors: {
  'brand-1': '#27c9cf',
  'brand-2': '#faf7eb',
  'brand-3': '#f2dd80',
  'brand-4': '#f7cd4f',
  'brand-5': '#d97818',
}

RGB Array

[39, 201, 207], [250, 247, 235], [242, 221, 128], [247, 205, 79], [217, 120, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #27C9CF, #FAF7EB, #F2DD80, #F7CD4F, #D97818 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: #27c9cf; --color-2: #faf7eb; --color-3: #f2dd80; --color-4: #f7cd4f; --color-5: #d97818. 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 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