← Back to Editor

#90C0D0 · #FFE7BA · #D5835E · #D86B32 · #80AA9B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#90C0D0

Sky Blue · SkyBlue · Lake Green

HEX
#90C0D0
RGB
rgb(144, 192, 208)
HSL
hsl(195, 41%, 69%)
HSB
hsb(195, 31%, 82%)
CMYK
cmyk(31%, 8%, 0%, 18%)
Oklch
oklch(77.9% 0.055 220.4)

TraditionalSky Blue」· PaintLake Green」· Creative Arctic Pool

#FFE7BA

Goose Yellow · Bisque · Peach Orange

HEX
#FFE7BA
RGB
rgb(255, 231, 186)
HSL
hsl(39, 100%, 86%)
HSB
hsb(39, 27%, 100%)
CMYK
cmyk(0%, 9%, 27%, 0%)
Oklch
oklch(93.6% 0.064 83.1)

TraditionalGoose Yellow」· PaintPeach Orange」· Creative Honey Glow

#D5835E

Tangerine · DarkSalmon · Warm Sun

HEX
#D5835E
RGB
rgb(213, 131, 94)
HSL
hsl(19, 59%, 60%)
HSB
hsb(19, 56%, 84%)
CMYK
cmyk(0%, 38%, 56%, 16%)
Oklch
oklch(68.9% 0.114 44.7)

TraditionalTangerine」· PaintWarm Sun」· Creative Blush Sunrise

#D86B32

Tangerine · Chocolate · Warm Sun

HEX
#D86B32
RGB
rgb(216, 107, 50)
HSL
hsl(21, 68%, 52%)
HSB
hsb(21, 77%, 85%)
CMYK
cmyk(0%, 50%, 77%, 15%)
Oklch
oklch(64.7% 0.154 45.6)

TraditionalTangerine」· PaintWarm Sun」· Creative Blush Sunrise

#80AA9B

Mineral Blue · DarkSeaGreen · Olive Green

HEX
#80AA9B
RGB
rgb(128, 170, 155)
HSL
hsl(159, 20%, 58%)
HSB
hsb(159, 25%, 67%)
CMYK
cmyk(25%, 0%, 9%, 33%)
Oklch
oklch(70.3% 0.050 170.9)

TraditionalMineral Blue」· PaintOlive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

90C0D0
D0A090

Analogous

90D0C0
90C0D0
90A0D0

Triadic

90C0D0
D090C0
C0D090

Split-Comp.

90C0D0
D090A0
D0C090

Tetradic

90C0D0
C090D0
D0A090
A0D090

Contrast Matrix WCAG 2.1 Contrast

90C0D0
FFE7BA
D5835E
D86B32
80AA9B
1.6
Fail
1.5
Fail
1.8
Fail
1.3
Fail
1.6
Fail
2.4
Fail
2.9
Fail
2.1
Fail
1.5
Fail
2.4
Fail
1.2
Fail
1.1
Fail
1.8
Fail
2.9
Fail
1.2
Fail
1.3
Fail
1.3
Fail
2.1
Fail
1.1
Fail
1.3
Fail
White BG
2.0Fail
1.2Fail
2.9Fail
3.5AA Large
2.6Fail
Black BG
10.6AAA
17.4AAA
7.2AAA
6.1AA
8.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A5A5CC
F5F4C5
B1B167
A9A840
92939F

Deuteranopia

A29ECB
F6F8C8
B6BC69
AFB743
908DA0

Tritanopia

92C9C8
FECDCF
D16E70
D34B4D
82A1A2

Achromatopsia

B3B3B3
E9E9E9
979797
858585
9C9C9C

Shades & Tints Shades & Tints

#90C0D0

Dark
Light

#FFE7BA

Dark
Light

#D5835E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #90c0d0;
  --color-2: #ffe7ba;
  --color-3: #d5835e;
  --color-4: #d86b32;
  --color-5: #80aa9b;
}

SCSS

$color-1: #90c0d0;
$color-2: #ffe7ba;
$color-3: #d5835e;
$color-4: #d86b32;
$color-5: #80aa9b;

TAILWIND

colors: {
  'brand-1': '#90c0d0',
  'brand-2': '#ffe7ba',
  'brand-3': '#d5835e',
  'brand-4': '#d86b32',
  'brand-5': '#80aa9b',
}

RGB Array

[144, 192, 208], [255, 231, 186], [213, 131, 94], [216, 107, 50], [128, 170, 155]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #90C0D0, #FFE7BA, #D5835E, #D86B32, #80AA9B is ideal for: corporate websites, product showcases, portfolios. 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: #90c0d0; --color-2: #ffe7ba; --color-3: #d5835e; --color-4: #d86b32; --color-5: #80aa9b. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 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