← Back to Editor

#333036 · #C4605A · #FA8F61 · #FADB7F · #878F61

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

#333036

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#333036
RGB
rgb(51, 48, 54)
HSL
hsl(270, 6%, 20%)
HSB
hsb(270, 11%, 21%)
CMYK
cmyk(6%, 11%, 0%, 79%)
Oklch
oklch(31.5% 0.011 308.1)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#C4605A

Crimson · Sienna · Passion Red

HEX
#C4605A
RGB
rgb(196, 96, 90)
HSL
hsl(3, 47%, 56%)
HSB
hsb(3, 54%, 77%)
CMYK
cmyk(0%, 51%, 54%, 23%)
Oklch
oklch(60.8% 0.129 25.1)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#FA8F61

Apricot · SandyBrown · Warm Sun

HEX
#FA8F61
RGB
rgb(250, 143, 97)
HSL
hsl(18, 94%, 68%)
HSB
hsb(18, 61%, 98%)
CMYK
cmyk(0%, 43%, 61%, 2%)
Oklch
oklch(75.6% 0.143 43.4)

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

#FADB7F

Goose Yellow · Khaki · Sunflower

HEX
#FADB7F
RGB
rgb(250, 219, 127)
HSL
hsl(45, 92%, 74%)
HSB
hsb(45, 49%, 98%)
CMYK
cmyk(0%, 12%, 49%, 2%)
Oklch
oklch(89.8% 0.117 91.3)

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

#878F61

Grass Green · Gray · Olive Green

HEX
#878F61
RGB
rgb(135, 143, 97)
HSL
hsl(70, 19%, 47%)
HSB
hsb(70, 32%, 56%)
CMYK
cmyk(6%, 0%, 32%, 44%)
Oklch
oklch(63.2% 0.066 116.3)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

333036
333630

Analogous

303036
333036
363036

Triadic

333036
363330
303633

Split-Comp.

333036
363630
303630

Tetradic

333036
363030
333630
303636

Contrast Matrix WCAG 2.1 Contrast

333036
C4605A
FA8F61
FADB7F
878F61
—
3.2
AA Large
5.7
AA
9.6
AAA
3.8
AA Large
3.2
AA Large
—
1.8
Fail
3.0
AA Large
1.2
Fail
5.7
AA
1.8
Fail
—
1.7
Fail
1.5
Fail
9.6
AAA
3.0
AA Large
1.7
Fail
—
2.5
Fail
3.8
AA Large
1.2
Fail
1.5
Fail
2.5
Fail
—
White BG
13.0AAA
4.1AA Large
2.3Fail
1.4Fail
3.4AA Large
Black BG
1.6Fail
5.2AA
9.2AAA
15.5AAA
6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

323235
99985B
CCCB6C
EDEC95
8A8B6C

Deuteranopia

323234
9FA65C
D2DA6F
EEF19B
8A896F

Tritanopia

333333
BF5D5D
F57577
F8A7AB
877577

Achromatopsia

323232
7D7D7D
AAAAAA
DADADA
878787

Shades & Tints Shades & Tints

#333036

Dark
Light

#C4605A

Dark
Light

#FA8F61

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #333036;
  --color-2: #c4605a;
  --color-3: #fa8f61;
  --color-4: #fadb7f;
  --color-5: #878f61;
}

SCSS

$color-1: #333036;
$color-2: #c4605a;
$color-3: #fa8f61;
$color-4: #fadb7f;
$color-5: #878f61;

TAILWIND

colors: {
  'brand-1': '#333036',
  'brand-2': '#c4605a',
  'brand-3': '#fa8f61',
  'brand-4': '#fadb7f',
  'brand-5': '#878f61',
}

RGB Array

[51, 48, 54], [196, 96, 90], [250, 143, 97], [250, 219, 127], [135, 143, 97]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #333036, #C4605A, #FA8F61, #FADB7F, #878F61 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: #333036; --color-2: #c4605a; --color-3: #fa8f61; --color-4: #fadb7f; --color-5: #878f61. 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