← Back to Editor

#907818 · #A87830 · #C0A860 · #E0C36C · #C9E06C

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 Library

Color Details Color Details

#907818

Ochre · Olive · Honey Gold

HEX
#907818
RGB
rgb(144, 120, 24)
HSL
hsl(48, 71%, 33%)
HSB
hsb(48, 83%, 56%)
CMYK
cmyk(0%, 17%, 83%, 44%)
Oklch
oklch(57.9% 0.111 93.7)

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

#A87830

Ochre · Sienna · Amber Brown

HEX
#A87830
RGB
rgb(168, 120, 48)
HSL
hsl(36, 56%, 42%)
HSB
hsb(36, 71%, 66%)
CMYK
cmyk(0%, 29%, 71%, 34%)
Oklch
oklch(60.8% 0.106 74.1)

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

#C0A860

Ginger · Tan · Sunflower

HEX
#C0A860
RGB
rgb(192, 168, 96)
HSL
hsl(45, 43%, 56%)
HSB
hsb(45, 50%, 75%)
CMYK
cmyk(0%, 13%, 50%, 25%)
Oklch
oklch(73.7% 0.096 91.5)

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

#E0C36C

Ginger · BurlyWood · Sunflower

HEX
#E0C36C
RGB
rgb(224, 195, 108)
HSL
hsl(45, 65%, 65%)
HSB
hsb(45, 52%, 88%)
CMYK
cmyk(0%, 13%, 52%, 12%)
Oklch
oklch(82.4% 0.112 91.4)

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

#C9E06C

Willow Green · Khaki · Apple Green

HEX
#C9E06C
RGB
rgb(201, 224, 108)
HSL
hsl(72, 65%, 65%)
HSB
hsb(72, 52%, 88%)
CMYK
cmyk(10%, 0%, 52%, 12%)
Oklch
oklch(86.6% 0.144 118.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

907818
183090

Analogous

903C18
907818
6C9018

Triadic

907818
189078
781890

Split-Comp.

907818
186C90
3C1890

Tetradic

907818
18903C
183090
90186C

Contrast Matrix WCAG 2.1 Contrast

907818
A87830
C0A860
E0C36C
C9E06C
—
1.1
Fail
1.8
Fail
2.5
Fail
2.9
Fail
1.1
Fail
—
1.7
Fail
2.3
Fail
2.7
Fail
1.8
Fail
1.7
Fail
—
1.4
Fail
1.6
Fail
2.5
Fail
2.3
Fail
1.4
Fail
—
1.2
Fail
2.9
Fail
2.7
Fail
1.6
Fail
1.2
Fail
—
White BG
4.3AA Large
3.9AA Large
2.3Fail
1.7Fail
1.5Fail
Black BG
4.9AA
5.4AA
9.0AAA
12.2AAA
14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

86852F
939341
B6B571
D3D381
D3D388

Deuteranopia

878935
969A46
B7B976
D5D786
D2D08F

Tritanopia

8F4246
A64F52
BF7F82
DF9295
CA9EA3

Achromatopsia

747474
7E7E7E
A7A7A7
C2C2C2
CCCCCC

Shades & Tints Shades & Tints

#907818

Dark
Light

#A87830

Dark
Light

#C0A860

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #907818;
  --color-2: #a87830;
  --color-3: #c0a860;
  --color-4: #e0c36c;
  --color-5: #c9e06c;
}

SCSS

$color-1: #907818;
$color-2: #a87830;
$color-3: #c0a860;
$color-4: #e0c36c;
$color-5: #c9e06c;

TAILWIND

colors: {
  'brand-1': '#907818',
  'brand-2': '#a87830',
  'brand-3': '#c0a860',
  'brand-4': '#e0c36c',
  'brand-5': '#c9e06c',
}

RGB Array

[144, 120, 24], [168, 120, 48], [192, 168, 96], [224, 195, 108], [201, 224, 108]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #907818, #A87830, #C0A860, #E0C36C, #C9E06C is ideal for: corporate websites, product showcases, portfolios. 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: #907818; --color-2: #a87830; --color-3: #c0a860; --color-4: #e0c36c; --color-5: #c9e06c. 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. 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