← Back to Editor

#ECB74D · #A2B8AB · #8C7166 · #700000 · #000002

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#ECB74D

Ginger · SandyBrown · Sunflower

HEX
#ECB74D
RGB
rgb(236, 183, 77)
HSL
hsl(40, 81%, 61%)
HSB
hsb(40, 67%, 93%)
CMYK
cmyk(0%, 22%, 67%, 7%)
Oklch
oklch(80.9% 0.136 81.9)

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

#A2B8AB

Celadon · DarkGray · Apple Green

HEX
#A2B8AB
RGB
rgb(162, 184, 171)
HSL
hsl(145, 13%, 68%)
HSB
hsb(145, 12%, 72%)
CMYK
cmyk(12%, 0%, 7%, 28%)
Oklch
oklch(76.2% 0.030 159.7)

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

#8C7166

Tangerine · Gray · Amber Brown

HEX
#8C7166
RGB
rgb(140, 113, 102)
HSL
hsl(17, 16%, 47%)
HSB
hsb(17, 27%, 55%)
CMYK
cmyk(0%, 19%, 27%, 45%)
Oklch
oklch(57.2% 0.038 43.3)

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

#700000

Vermilion · Maroon · Wine Red

HEX
#700000
RGB
rgb(112, 0, 0)
HSL
hsl(0, 100%, 22%)
HSB
hsb(0, 100%, 44%)
CMYK
cmyk(0%, 100%, 100%, 56%)
Oklch
oklch(34.2% 0.140 29.2)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

#000002

Deep Indigo · Black · Deep Sea Blue

HEX
#000002
RGB
rgb(0, 0, 2)
HSL
hsl(240, 100%, 0%)
HSB
hsb(240, 100%, 1%)
CMYK
cmyk(100%, 100%, 0%, 99%)
Oklch
oklch(3.8% 0.027 264.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECB74D
4B81EC

Analogous

EC664B
ECB74D
D1EC4B

Triadic

ECB74D
4BECB6
B64BEC

Split-Comp.

ECB74D
4BD1EC
664BEC

Tetradic

ECB74D
4BEC66
4B81EC
EC4BD1

Contrast Matrix WCAG 2.1 Contrast

ECB74D
A2B8AB
8C7166
700000
000002
—
1.1
Fail
2.5
Fail
6.8
AA
11.4
AAA
1.1
Fail
—
2.1
Fail
5.9
AA
10.0
AAA
2.5
Fail
2.1
Fail
—
2.8
Fail
4.7
AA
6.8
AA
5.9
AA
2.8
Fail
—
1.7
Fail
11.4
AAA
10.0
AAA
4.7
AA
1.7
Fail
—
White BG
1.8Fail
2.1Fail
4.5AA Large
12.4AAA
21.0AAA
Black BG
11.4AAA
10.0AAA
4.7AA
1.7Fail
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D5D567
ACACAE
808069
403E00
000002

Deuteranopia

D8DC6D
AAA9AF
828469
464E00
000001

Tritanopia

E97B7F
A3B1B1
8B6B6B
6A0000
000101

Achromatopsia

BBBBBB
B0B0B0
787878
212121
000000

Shades & Tints Shades & Tints

#ECB74D

Dark
Light

#A2B8AB

Dark
Light

#8C7166

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecb74d;
  --color-2: #a2b8ab;
  --color-3: #8c7166;
  --color-4: #700000;
  --color-5: #000002;
}

SCSS

$color-1: #ecb74d;
$color-2: #a2b8ab;
$color-3: #8c7166;
$color-4: #700000;
$color-5: #000002;

TAILWIND

colors: {
  'brand-1': '#ecb74d',
  'brand-2': '#a2b8ab',
  'brand-3': '#8c7166',
  'brand-4': '#700000',
  'brand-5': '#000002',
}

RGB Array

[236, 183, 77], [162, 184, 171], [140, 113, 102], [112, 0, 0], [0, 0, 2]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ECB74D, #A2B8AB, #8C7166, #700000, #000002 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ecb74d; --color-2: #a2b8ab; --color-3: #8c7166; --color-4: #700000; --color-5: #000002. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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