← Back to Editor

#F0C165 · #E77373 · #85A687 · #6A8785 · #00182B

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 LibraryData Visualization

Color Details Color Details

#F0C165

Ginger · SandyBrown · Sunflower

HEX
#F0C165
RGB
rgb(240, 193, 101)
HSL
hsl(40, 82%, 67%)
HSB
hsb(40, 58%, 94%)
CMYK
cmyk(0%, 20%, 58%, 6%)
Oklch
oklch(83.5% 0.123 82.5)

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

#E77373

Peach Pink · LightCoral · Coral Red

HEX
#E77373
RGB
rgb(231, 115, 115)
HSL
hsl(0, 71%, 68%)
HSB
hsb(0, 50%, 91%)
CMYK
cmyk(0%, 50%, 50%, 9%)
Oklch
oklch(69.0% 0.144 21.5)

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

#85A687

Celadon · DarkSeaGreen · Olive Green

HEX
#85A687
RGB
rgb(133, 166, 135)
HSL
hsl(124, 16%, 59%)
HSB
hsb(124, 20%, 65%)
CMYK
cmyk(20%, 0%, 19%, 35%)
Oklch
oklch(69.2% 0.058 146.5)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#6A8785

Mineral Blue · SlateGray · Mint Ice

HEX
#6A8785
RGB
rgb(106, 135, 133)
HSL
hsl(176, 12%, 47%)
HSB
hsb(176, 21%, 53%)
CMYK
cmyk(21%, 0%, 1%, 47%)
Oklch
oklch(60.0% 0.033 191.1)

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

#00182B

Lake Blue · Black · Deep Sea Blue

HEX
#00182B
RGB
rgb(0, 24, 43)
HSL
hsl(207, 100%, 8%)
HSB
hsb(207, 100%, 17%)
CMYK
cmyk(100%, 44%, 0%, 83%)
Oklch
oklch(20.1% 0.050 244.0)

Traditional「Lake Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0C165
6694F0

Analogous

F07D66
F0C165
D9F066

Triadic

F0C165
66F0C2
C266F0

Split-Comp.

F0C165
66D9F0
7D66F0

Tetradic

F0C165
66F07D
6694F0
F066D9

Contrast Matrix WCAG 2.1 Contrast

F0C165
E77373
85A687
6A8785
00182B
—
1.8
Fail
1.6
Fail
2.3
Fail
10.7
AAA
1.8
Fail
—
1.1
Fail
1.3
Fail
6.1
AA
1.6
Fail
1.1
Fail
—
1.4
Fail
6.7
AA
2.3
Fail
1.3
Fail
1.4
Fail
—
4.6
AA
10.7
AAA
6.1
AA
6.7
AA
4.6
AA
—
White BG
1.7Fail
3.0Fail
2.7Fail
3.9AA Large
18.0AAA
Black BG
12.5AAA
7.1AAA
7.8AAA
5.4AA
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDB7B
B5B473
93948F
777785
0A0B26

Deuteranopia

DEE281
BCC473
918F90
757386
090725

Tritanopia

EE8D91
E17373
879496
6B8686
012322

Achromatopsia

C5C5C5
969696
999999
7E7E7E
131313

Shades & Tints Shades & Tints

#F0C165

Dark
Light

#E77373

Dark
Light

#85A687

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0c165;
  --color-2: #e77373;
  --color-3: #85a687;
  --color-4: #6a8785;
  --color-5: #00182b;
}

SCSS

$color-1: #f0c165;
$color-2: #e77373;
$color-3: #85a687;
$color-4: #6a8785;
$color-5: #00182b;

TAILWIND

colors: {
  'brand-1': '#f0c165',
  'brand-2': '#e77373',
  'brand-3': '#85a687',
  'brand-4': '#6a8785',
  'brand-5': '#00182b',
}

RGB Array

[240, 193, 101], [231, 115, 115], [133, 166, 135], [106, 135, 133], [0, 24, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0C165, #E77373, #85A687, #6A8785, #00182B is ideal for: 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: #f0c165; --color-2: #e77373; --color-3: #85a687; --color-4: #6a8785; --color-5: #00182b. 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. 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 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