← Back to Editor

#1C2214 · #315458 · #069C91 · #BB9B52 · #D3BB71

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

#1C2214

Grass Green · Black · Dark Green

HEX
#1C2214
RGB
rgb(28, 34, 20)
HSL
hsl(86, 26%, 11%)
HSB
hsb(86, 41%, 13%)
CMYK
cmyk(18%, 0%, 41%, 87%)
Oklch
oklch(24.1% 0.027 127.2)

Traditional「Grass Green」· Paint「Dark Green」· Creative Blush Sunrise

#315458

Slate Blue · DarkSlateGray · Mint Ice

HEX
#315458
RGB
rgb(49, 84, 88)
HSL
hsl(186, 28%, 27%)
HSB
hsb(186, 44%, 35%)
CMYK
cmyk(44%, 5%, 0%, 65%)
Oklch
oklch(42.1% 0.041 205.0)

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

#069C91

Mineral Blue · Teal · Mint Ice

HEX
#069C91
RGB
rgb(6, 156, 145)
HSL
hsl(176, 93%, 32%)
HSB
hsb(176, 96%, 61%)
CMYK
cmyk(96%, 0%, 7%, 39%)
Oklch
oklch(62.4% 0.109 186.0)

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

#BB9B52

Ginger · SandyBrown · Sunflower

HEX
#BB9B52
RGB
rgb(187, 155, 82)
HSL
hsl(42, 44%, 53%)
HSB
hsb(42, 56%, 73%)
CMYK
cmyk(0%, 17%, 56%, 27%)
Oklch
oklch(70.3% 0.100 86.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#D3BB71

Ginger · BurlyWood · Sunflower

HEX
#D3BB71
RGB
rgb(211, 187, 113)
HSL
hsl(45, 53%, 64%)
HSB
hsb(45, 46%, 83%)
CMYK
cmyk(0%, 11%, 46%, 17%)
Oklch
oklch(79.6% 0.098 92.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1C2214
1B1523

Analogous

232215
1C2214
162315

Triadic

1C2214
151D23
23151D

Split-Comp.

1C2214
151623
221523

Tetradic

1C2214
152322
1B1523
231516

Contrast Matrix WCAG 2.1 Contrast

1C2214
315458
069C91
BB9B52
D3BB71
—
2.0
Fail
4.8
AA
6.2
AA
8.6
AAA
2.0
Fail
—
2.4
Fail
3.1
AA Large
4.4
AA Large
4.8
AA
2.4
Fail
—
1.3
Fail
1.8
Fail
6.2
AA
3.1
AA Large
1.3
Fail
—
1.4
Fail
8.6
AAA
4.4
AA Large
1.8
Fail
1.4
Fail
—
White BG
16.3AAA
8.3AAA
3.4AA Large
2.7Fail
1.9Fail
Black BG
1.3Fail
2.5Fail
6.2AA
7.9AAA
11.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1F1F17
404057
474894
ADAD64
C9C883

Deuteranopia

1E1E18
3E3C57
3E3394
AFB168
CACC87

Tritanopia

1C1A1B
335656
0E9696
B97275
D29194

Achromatopsia

1F1F1F
4A4A4A
6E6E6E
9C9C9C
BABABA

Shades & Tints Shades & Tints

#1C2214

Dark
Light

#315458

Dark
Light

#069C91

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1c2214;
  --color-2: #315458;
  --color-3: #069c91;
  --color-4: #bb9b52;
  --color-5: #d3bb71;
}

SCSS

$color-1: #1c2214;
$color-2: #315458;
$color-3: #069c91;
$color-4: #bb9b52;
$color-5: #d3bb71;

TAILWIND

colors: {
  'brand-1': '#1c2214',
  'brand-2': '#315458',
  'brand-3': '#069c91',
  'brand-4': '#bb9b52',
  'brand-5': '#d3bb71',
}

RGB Array

[28, 34, 20], [49, 84, 88], [6, 156, 145], [187, 155, 82], [211, 187, 113]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1C2214, #315458, #069C91, #BB9B52, #D3BB71 is ideal for: tech websites, dark mode UIs, game UIs, 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: #1c2214; --color-2: #315458; --color-3: #069c91; --color-4: #bb9b52; --color-5: #d3bb71. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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