← Back to Editor

#C68C01 · #F6C246 · #F3F3F2 · #5E5B5B · #D6D0D0

warm

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

#C68C01

Ochre · DarkGoldenRod · Honey Gold

HEX
#C68C01
RGB
rgb(198, 140, 1)
HSL
hsl(42, 99%, 39%)
HSB
hsb(42, 99%, 78%)
CMYK
cmyk(0%, 29%, 99%, 22%)
Oklch
oklch(68.0% 0.141 79.1)

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

#F6C246

Ginger · SandyBrown · Sunflower

HEX
#F6C246
RGB
rgb(246, 194, 70)
HSL
hsl(42, 91%, 62%)
HSB
hsb(42, 72%, 96%)
CMYK
cmyk(0%, 21%, 72%, 4%)
Oklch
oklch(83.9% 0.148 85.3)

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

#F3F3F2

Plain White · SeaShell · Cloud White

HEX
#F3F3F2
RGB
rgb(243, 243, 242)
HSL
hsl(60, 4%, 95%)
HSB
hsb(60, 0%, 95%)
CMYK
cmyk(0%, 0%, 0%, 5%)
Oklch
oklch(96.4% 0.001 106.4)

Traditional「Plain White」· Paint「Cloud White」· Creative Morning Mist

#5E5B5B

Ink Gray · DimGray · Charcoal

HEX
#5E5B5B
RGB
rgb(94, 91, 91)
HSL
hsl(0, 2%, 36%)
HSB
hsb(0, 3%, 37%)
CMYK
cmyk(0%, 3%, 3%, 63%)
Oklch
oklch(47.4% 0.004 17.3)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#D6D0D0

Silver Gray · LightGray · Pearl Gray

HEX
#D6D0D0
RGB
rgb(214, 208, 208)
HSL
hsl(0, 7%, 83%)
HSB
hsb(0, 3%, 84%)
CMYK
cmyk(0%, 3%, 3%, 16%)
Oklch
oklch(86.2% 0.007 17.3)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C68C01
013CC6

Analogous

C62801
C68C01
9FC601

Triadic

C68C01
01C68B
8B01C6

Split-Comp.

C68C01
019FC6
2801C6

Tetradic

C68C01
01C628
013CC6
C6019F

Contrast Matrix WCAG 2.1 Contrast

C68C01
F6C246
F3F3F2
5E5B5B
D6D0D0
—
1.8
Fail
2.6
Fail
2.3
Fail
1.9
Fail
1.8
Fail
—
1.5
Fail
4.1
AA Large
1.1
Fail
2.6
Fail
1.5
Fail
—
6.1
AA
1.4
Fail
2.3
Fail
4.1
AA Large
6.1
AA
—
4.4
AA Large
1.9
Fail
1.1
Fail
1.4
Fail
4.4
AA Large
—
White BG
2.9Fail
1.7Fail
1.1Fail
6.7AA
1.5Fail
Black BG
7.2AAA
12.7AAA
18.9AAA
3.1AA Large
13.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ADAC23
DFDF64
F3F3F2
5D5D5B
D3D3D0

Deuteranopia

B0B52B
E3E66B
F3F3F2
5D5D5B
D4D4D0

Tritanopia

C33D43
F37C81
F3F2F2
5E5B5B
D6D0D0

Achromatopsia

8D8D8D
C3C3C3
F3F3F3
5C5C5C
D2D2D2

Shades & Tints Shades & Tints

#C68C01

Dark
Light

#F6C246

Dark
Light

#F3F3F2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c68c01;
  --color-2: #f6c246;
  --color-3: #f3f3f2;
  --color-4: #5e5b5b;
  --color-5: #d6d0d0;
}

SCSS

$color-1: #c68c01;
$color-2: #f6c246;
$color-3: #f3f3f2;
$color-4: #5e5b5b;
$color-5: #d6d0d0;

TAILWIND

colors: {
  'brand-1': '#c68c01',
  'brand-2': '#f6c246',
  'brand-3': '#f3f3f2',
  'brand-4': '#5e5b5b',
  'brand-5': '#d6d0d0',
}

RGB Array

[198, 140, 1], [246, 194, 70], [243, 243, 242], [94, 91, 91], [214, 208, 208]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #C68C01, #F6C246, #F3F3F2, #5E5B5B, #D6D0D0 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: #c68c01; --color-2: #f6c246; --color-3: #f3f3f2; --color-4: #5e5b5b; --color-5: #d6d0d0. 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 warm-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