#239AB2 + #87AAB0 + #CDC0B0 + #E7CAA8 + #F6D294 · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#239AB2

Lake Blue · LightSeaGreen · Mint Ice

HEX

#239AB2

RGB

rgb(35, 154, 178)

HSL

hsl(190, 67%, 42%)

HSB

hsb(190, 80%, 70%)

CMYK

cmyk(80%, 13%, 0%, 30%)

Oklch

oklch(63.5% 0.104 215.2)

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

#87AAB0

Sky Blue · DarkGray · Lake Green

HEX

#87AAB0

RGB

rgb(135, 170, 176)

HSL

hsl(189, 21%, 61%)

HSB

hsb(189, 23%, 69%)

CMYK

cmyk(23%, 3%, 0%, 31%)

Oklch

oklch(71.4% 0.039 209.1)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#CDC0B0

Goose Yellow · Silver · Warm Sun

HEX

#CDC0B0

RGB

rgb(205, 192, 176)

HSL

hsl(33, 22%, 75%)

HSB

hsb(33, 14%, 80%)

CMYK

cmyk(0%, 6%, 14%, 20%)

Oklch

oklch(81.4% 0.026 73.1)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#E7CAA8

Goose Yellow · Wheat · Peach Orange

HEX

#E7CAA8

RGB

rgb(231, 202, 168)

HSL

hsl(32, 57%, 78%)

HSB

hsb(32, 27%, 91%)

CMYK

cmyk(0%, 13%, 27%, 9%)

Oklch

oklch(85.5% 0.056 71.4)

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

#F6D294

Goose Yellow · Khaki · Peach Orange

HEX

#F6D294

RGB

rgb(246, 210, 148)

HSL

hsl(38, 84%, 77%)

HSB

hsb(38, 40%, 96%)

CMYK

cmyk(0%, 15%, 40%, 4%)

Oklch

oklch(88.0% 0.089 80.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

239AB2

B33B23

Analogous

23B383

239AB2

2353B3

Triadic

239AB2

B3239B

9BB323

Split-Comp.

239AB2

B32353

B38323

Tetradic

239AB2

8323B3

B33B23

53B323

Contrast Matrix WCAG 2.1 Contrast

239AB2	87AAB0	CDC0B0	E7CAA8	F6D294
—	1.3 Fail	1.9 Fail	2.1 Fail	2.3 Fail
1.3 Fail	—	1.4 Fail	1.6 Fail	1.7 Fail
1.9 Fail	1.4 Fail	—	1.1 Fail	1.2 Fail
2.1 Fail	1.6 Fail	1.1 Fail	—	1.1 Fail
2.3 Fail	1.7 Fail	1.2 Fail	1.1 Fail	—

White BG

3.3AA Large

2.5Fail

1.8Fail

1.6Fail

1.4Fail

Black BG

6.3AA

8.4AAA

11.8AAA

13.4AAA

14.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5758AC

9696AF

C7C7B4

DADAB0

E6E6A3

Deuteranopia

5047AB

9492AE

C8C9B5

DCDEB2

E9EBA7

Tritanopia

29A8A7

89ADAD

CCB7B8

E6B7B8

F4AFB1

Achromatopsia

797979

A0A0A0

C2C2C2

CFCFCF

D6D6D6

Shades & Tints Shades & Tints

#239AB2

Dark

Light

#87AAB0

Dark

Light

#CDC0B0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #239ab2;
  --color-2: #87aab0;
  --color-3: #cdc0b0;
  --color-4: #e7caa8;
  --color-5: #f6d294;
}

SCSS

$color-1: #239ab2;
$color-2: #87aab0;
$color-3: #cdc0b0;
$color-4: #e7caa8;
$color-5: #f6d294;

TAILWIND

colors: {
  'brand-1': '#239ab2',
  'brand-2': '#87aab0',
  'brand-3': '#cdc0b0',
  'brand-4': '#e7caa8',
  'brand-5': '#f6d294',
}

RGB Array

[35, 154, 178], [135, 170, 176], [205, 192, 176], [231, 202, 168], [246, 210, 148]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #239AB2, #87AAB0, #CDC0B0, #E7CAA8, #F6D294 is ideal for: health products, baby brands, fresh-style blogs. 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: #239ab2; --color-2: #87aab0; --color-3: #cdc0b0; --color-4: #e7caa8; --color-5: #f6d294. 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. 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