← Back to Editor

#20020E · #975822 · #F0E4B4 · #A3B190 · #667D63

bright

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#20020E

Dark Violet · Black · Raspberry

HEX
#20020E
RGB
rgb(32, 2, 14)
HSL
hsl(336, 88%, 7%)
HSB
hsb(336, 94%, 13%)
CMYK
cmyk(0%, 94%, 56%, 87%)
Oklch
oklch(16.4% 0.058 358.0)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#975822

Tangerine · Sienna · Amber Brown

HEX
#975822
RGB
rgb(151, 88, 34)
HSL
hsl(28, 63%, 36%)
HSB
hsb(28, 77%, 59%)
CMYK
cmyk(0%, 42%, 77%, 41%)
Oklch
oklch(52.3% 0.107 57.4)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#F0E4B4

Goose Yellow · Wheat · Lemon Cream

HEX
#F0E4B4
RGB
rgb(240, 228, 180)
HSL
hsl(48, 67%, 82%)
HSB
hsb(48, 25%, 94%)
CMYK
cmyk(0%, 5%, 25%, 6%)
Oklch
oklch(91.7% 0.064 95.7)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#A3B190

Willow Green · DarkSeaGreen · Apple Green

HEX
#A3B190
RGB
rgb(163, 177, 144)
HSL
hsl(85, 17%, 63%)
HSB
hsb(85, 19%, 69%)
CMYK
cmyk(8%, 0%, 19%, 31%)
Oklch
oklch(74.0% 0.049 126.3)

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

#667D63

Celadon · DimGray · Olive Green

HEX
#667D63
RGB
rgb(102, 125, 99)
HSL
hsl(113, 12%, 44%)
HSB
hsb(113, 21%, 49%)
CMYK
cmyk(18%, 0%, 21%, 51%)
Oklch
oklch(56.4% 0.048 141.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

20020E
022215

Analogous

22021E
20020E
220502

Triadic

20020E
0F2202
020F22

Split-Comp.

20020E
022205
021E22

Tetradic

20020E
1E2202
022215
050222

Contrast Matrix WCAG 2.1 Contrast

20020E
975822
F0E4B4
A3B190
667D63
—
3.5
AA Large
15.3
AAA
8.6
AAA
4.3
AA Large
3.5
AA Large
—
4.4
AA Large
2.5
Fail
1.3
Fail
15.3
AAA
4.4
AA Large
—
1.8
Fail
3.5
AA Large
8.6
AAA
2.5
Fail
1.8
Fail
—
2.0
Fail
4.3
AA Large
1.3
Fail
3.5
AA Large
2.0
Fail
—
White BG
19.5AAA
5.6AA
1.3Fail
2.3Fail
4.5AA Large
Black BG
1.1Fail
3.7AA Large
16.5AAA
9.2AAA
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

13130B
7C7B2F
EBEBC0
A9A998
707069

Deuteranopia

15170A
7F8432
ECECC2
A8A79A
6F6D6B

Tritanopia

1F0908
94393C
EFC9CB
A49EA0
676E6F

Achromatopsia

0C0C0C
656565
E2E2E2
A9A9A9
737373

Shades & Tints Shades & Tints

#20020E

Dark
Light

#975822

Dark
Light

#F0E4B4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #20020e;
  --color-2: #975822;
  --color-3: #f0e4b4;
  --color-4: #a3b190;
  --color-5: #667d63;
}

SCSS

$color-1: #20020e;
$color-2: #975822;
$color-3: #f0e4b4;
$color-4: #a3b190;
$color-5: #667d63;

TAILWIND

colors: {
  'brand-1': '#20020e',
  'brand-2': '#975822',
  'brand-3': '#f0e4b4',
  'brand-4': '#a3b190',
  'brand-5': '#667d63',
}

RGB Array

[32, 2, 14], [151, 88, 34], [240, 228, 180], [163, 177, 144], [102, 125, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This bright-style palette of #20020E, #975822, #F0E4B4, #A3B190, #667D63 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: #20020e; --color-2: #975822; --color-3: #f0e4b4; --color-4: #a3b190; --color-5: #667d63. 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 bright-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