← Back to Editor

#B7F2D6 · #B0D3A9 · #898385 · #C19386 · #ED9E59

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

WorkspaceReading

Color Details Color Details

#B7F2D6

Jade · LightBlue · Mint Green

HEX
#B7F2D6
RGB
rgb(183, 242, 214)
HSL
hsl(152, 69%, 83%)
HSB
hsb(152, 24%, 95%)
CMYK
cmyk(24%, 0%, 12%, 5%)
Oklch
oklch(91.3% 0.071 164.2)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

#B0D3A9

Celadon · Silver · Apple Green

HEX
#B0D3A9
RGB
rgb(176, 211, 169)
HSL
hsl(110, 32%, 75%)
HSB
hsb(110, 20%, 83%)
CMYK
cmyk(17%, 0%, 20%, 17%)
Oklch
oklch(83.0% 0.069 140.4)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#898385

Ash · Gray · Warm Gray

HEX
#898385
RGB
rgb(137, 131, 133)
HSL
hsl(340, 2%, 53%)
HSB
hsb(340, 4%, 54%)
CMYK
cmyk(0%, 4%, 3%, 46%)
Oklch
oklch(61.6% 0.008 355.0)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#C19386

Peach Pink · Tan · Coral Red

HEX
#C19386
RGB
rgb(193, 147, 134)
HSL
hsl(13, 32%, 64%)
HSB
hsb(13, 31%, 76%)
CMYK
cmyk(0%, 24%, 31%, 24%)
Oklch
oklch(70.3% 0.059 36.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#ED9E59

Apricot · SandyBrown · Warm Sun

HEX
#ED9E59
RGB
rgb(237, 158, 89)
HSL
hsl(28, 80%, 64%)
HSB
hsb(28, 62%, 93%)
CMYK
cmyk(0%, 33%, 62%, 7%)
Oklch
oklch(76.4% 0.127 60.2)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7F2D6
F2B6D2

Analogous

B6F2B8
B7F2D6
B6F0F2

Triadic

B7F2D6
D6B6F2
F2D6B6

Split-Comp.

B7F2D6
F2B6F0
F2B8B6

Tetradic

B7F2D6
B8B6F2
F2B6D2
F0F2B6

Contrast Matrix WCAG 2.1 Contrast

B7F2D6
B0D3A9
898385
C19386
ED9E59
—
1.3
Fail
3.0
Fail
2.1
Fail
1.7
Fail
1.3
Fail
—
2.3
Fail
1.6
Fail
1.3
Fail
3.0
Fail
2.3
Fail
—
1.4
Fail
1.7
Fail
2.1
Fail
1.6
Fail
1.4
Fail
—
1.2
Fail
1.7
Fail
1.3
Fail
1.7
Fail
1.2
Fail
—
White BG
1.3Fail
1.6Fail
3.7AA Large
2.7Fail
2.2Fail
Black BG
16.7AAA
12.7AAA
5.6AA
7.8AAA
9.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D1DD
BFBFB3
868685
ADAD89
CBCA6A

Deuteranopia

CDC9DE
BDBBB6
878784
B0B38A
CFD56E

Tritanopia

BAE2E3
B2BBBD
898484
BF8C8C
E9777A

Achromatopsia

DDDDDD
C4C4C4
858585
9F9F9F
AEAEAE

Shades & Tints Shades & Tints

#B7F2D6

Dark
Light

#B0D3A9

Dark
Light

#898385

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7f2d6;
  --color-2: #b0d3a9;
  --color-3: #898385;
  --color-4: #c19386;
  --color-5: #ed9e59;
}

SCSS

$color-1: #b7f2d6;
$color-2: #b0d3a9;
$color-3: #898385;
$color-4: #c19386;
$color-5: #ed9e59;

TAILWIND

colors: {
  'brand-1': '#b7f2d6',
  'brand-2': '#b0d3a9',
  'brand-3': '#898385',
  'brand-4': '#c19386',
  'brand-5': '#ed9e59',
}

RGB Array

[183, 242, 214], [176, 211, 169], [137, 131, 133], [193, 147, 134], [237, 158, 89]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #B7F2D6, #B0D3A9, #898385, #C19386, #ED9E59 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: #b7f2d6; --color-2: #b0d3a9; --color-3: #898385; --color-4: #c19386; --color-5: #ed9e59. 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