← Back to Editor

#676043 · #342C17 · #FDB151 · #F8F1E1 · #CBF1D8

A 5-color palette 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

#676043

Ochre · DarkOliveGreen · Honey Gold

HEX
#676043
RGB
rgb(103, 96, 67)
HSL
hsl(48, 21%, 33%)
HSB
hsb(48, 35%, 40%)
CMYK
cmyk(0%, 7%, 35%, 60%)
Oklch
oklch(48.8% 0.044 96.2)

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

#342C17

Ochre · DarkSlateGray · Amber Gold

HEX
#342C17
RGB
rgb(52, 44, 23)
HSL
hsl(43, 39%, 15%)
HSB
hsb(43, 56%, 20%)
CMYK
cmyk(0%, 15%, 56%, 80%)
Oklch
oklch(29.6% 0.036 89.3)

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

#FDB151

Ginger · SandyBrown · Warm Sun

HEX
#FDB151
RGB
rgb(253, 177, 81)
HSL
hsl(33, 98%, 65%)
HSB
hsb(33, 68%, 99%)
CMYK
cmyk(0%, 30%, 68%, 1%)
Oklch
oklch(81.6% 0.141 69.6)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#F8F1E1

Goose Yellow · Linen · Lemon Cream

HEX
#F8F1E1
RGB
rgb(248, 241, 225)
HSL
hsl(42, 62%, 93%)
HSB
hsb(42, 9%, 97%)
CMYK
cmyk(0%, 3%, 9%, 3%)
Oklch
oklch(95.9% 0.022 87.2)

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

#CBF1D8

Emerald · LightGray · Mint Green

HEX
#CBF1D8
RGB
rgb(203, 241, 216)
HSL
hsl(141, 58%, 87%)
HSB
hsb(141, 16%, 95%)
CMYK
cmyk(16%, 0%, 10%, 5%)
Oklch
oklch(92.4% 0.052 156.4)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

676043
424A66

Analogous

664D42
676043
5B6642

Triadic

676043
42665F
5F4266

Split-Comp.

676043
425B66
4D4266

Tetradic

676043
42664D
424A66
66425B

Contrast Matrix WCAG 2.1 Contrast

676043
342C17
FDB151
F8F1E1
CBF1D8
—
2.2
Fail
3.5
AA Large
5.6
AA
5.1
AA
2.2
Fail
—
7.6
AAA
12.3
AAA
11.3
AAA
3.5
AA Large
7.6
AAA
—
1.6
Fail
1.5
Fail
5.6
AA
12.3
AAA
1.6
Fail
—
1.1
Fail
5.1
AA
11.3
AAA
1.5
Fail
1.1
Fail
—
White BG
6.3AA
13.8AAA
1.8Fail
1.1Fail
1.2Fail
Black BG
3.3AA Large
1.5Fail
11.6AAA
18.7AAA
17.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

64644A
31301C
DCDB68
F5F5E5
DBDCDE

Deuteranopia

64654C
31321D
E1E66E
F5F6E6
D9D6E0

Tritanopia

675051
342021
F97B7F
F8E8E9
CDE3E4

Achromatopsia

5F5F5F
2C2C2C
BDBDBD
F1F1F1
E3E3E3

Shades & Tints Shades & Tints

#676043

Dark
Light

#342C17

Dark
Light

#FDB151

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #676043;
  --color-2: #342c17;
  --color-3: #fdb151;
  --color-4: #f8f1e1;
  --color-5: #cbf1d8;
}

SCSS

$color-1: #676043;
$color-2: #342c17;
$color-3: #fdb151;
$color-4: #f8f1e1;
$color-5: #cbf1d8;

TAILWIND

colors: {
  'brand-1': '#676043',
  'brand-2': '#342c17',
  'brand-3': '#fdb151',
  'brand-4': '#f8f1e1',
  'brand-5': '#cbf1d8',
}

RGB Array

[103, 96, 67], [52, 44, 23], [253, 177, 81], [248, 241, 225], [203, 241, 216]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #676043, #342C17, #FDB151, #F8F1E1, #CBF1D8 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: #676043; --color-2: #342c17; --color-3: #fdb151; --color-4: #f8f1e1; --color-5: #cbf1d8. 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