← Back to Editor

#C68B0E · #FBD742 · #3F3C46 · #7B7E8A · #222433

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

#C68B0E

Ochre · DarkGoldenRod · Honey Gold

HEX
#C68B0E
RGB
rgb(198, 139, 14)
HSL
hsl(41, 87%, 42%)
HSB
hsb(41, 93%, 78%)
CMYK
cmyk(0%, 30%, 93%, 22%)
Oklch
oklch(67.8% 0.139 77.9)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#FBD742

Ginger · SandyBrown · Sunflower

HEX
#FBD742
RGB
rgb(251, 215, 66)
HSL
hsl(48, 96%, 62%)
HSB
hsb(48, 74%, 98%)
CMYK
cmyk(0%, 14%, 74%, 2%)
Oklch
oklch(88.5% 0.162 94.9)

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

#3F3C46

Deep Indigo · DarkSlateGray · Dark Stone

HEX
#3F3C46
RGB
rgb(63, 60, 70)
HSL
hsl(258, 8%, 25%)
HSB
hsb(258, 14%, 27%)
CMYK
cmyk(10%, 14%, 0%, 73%)
Oklch
oklch(36.3% 0.017 299.2)

Traditional「Deep Indigo」· Paint「Dark Stone」· Creative Midnight Shadow

#7B7E8A

Ash · Gray · Warm Gray

HEX
#7B7E8A
RGB
rgb(123, 126, 138)
HSL
hsl(228, 6%, 51%)
HSB
hsb(228, 11%, 54%)
CMYK
cmyk(11%, 9%, 0%, 46%)
Oklch
oklch(59.5% 0.019 274.6)

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

#222433

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#222433
RGB
rgb(34, 36, 51)
HSL
hsl(233, 20%, 17%)
HSB
hsb(233, 33%, 20%)
CMYK
cmyk(33%, 29%, 0%, 80%)
Oklch
oklch(26.5% 0.028 278.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C68B0E
0E49C8

Analogous

C8300E
C68B0E
A6C80E

Triadic

C68B0E
0EC88D
8D0EC8

Split-Comp.

C68B0E
0EA6C8
300EC8

Tetradic

C68B0E
0EC830
0E49C8
C80EA6

Contrast Matrix WCAG 2.1 Contrast

C68B0E
FBD742
3F3C46
7B7E8A
222433
—
2.1
Fail
3.6
AA Large
1.4
Fail
5.2
AA
2.1
Fail
—
7.7
AAA
2.9
Fail
10.9
AAA
3.6
AA Large
7.7
AAA
—
2.7
Fail
1.4
Fail
1.4
Fail
2.9
Fail
2.7
Fail
—
3.8
AA Large
5.2
AA
10.9
AAA
1.4
Fail
3.8
AA Large
—
White BG
3.0Fail
1.4Fail
10.8AAA
4.0AA Large
15.3AAA
Black BG
7.1AAA
14.9AAA
1.9Fail
5.2AA
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

ACAC2C
EBEB66
3E3E44
7C7C87
23232F

Deuteranopia

B0B433
EEF06F
3E3E43
7C7C86
23232E

Tritanopia

C34449
F98389
3F4241
7B8584
222D2C

Achromatopsia

8E8E8E
D1D1D1
3E3E3E
7E7E7E
252525

Shades & Tints Shades & Tints

#C68B0E

Dark
Light

#FBD742

Dark
Light

#3F3C46

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c68b0e;
  --color-2: #fbd742;
  --color-3: #3f3c46;
  --color-4: #7b7e8a;
  --color-5: #222433;
}

SCSS

$color-1: #c68b0e;
$color-2: #fbd742;
$color-3: #3f3c46;
$color-4: #7b7e8a;
$color-5: #222433;

TAILWIND

colors: {
  'brand-1': '#c68b0e',
  'brand-2': '#fbd742',
  'brand-3': '#3f3c46',
  'brand-4': '#7b7e8a',
  'brand-5': '#222433',
}

RGB Array

[198, 139, 14], [251, 215, 66], [63, 60, 70], [123, 126, 138], [34, 36, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C68B0E, #FBD742, #3F3C46, #7B7E8A, #222433 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: #c68b0e; --color-2: #fbd742; --color-3: #3f3c46; --color-4: #7b7e8a; --color-5: #222433. 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