← Back to Editor

#9D310B · #B64621 · #FAFFD4 · #5DAF99 · #1B1F22

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

#9D310B

Tangerine · Brown · Amber Brown

HEX
#9D310B
RGB
rgb(157, 49, 11)
HSL
hsl(16, 87%, 33%)
HSB
hsb(16, 93%, 62%)
CMYK
cmyk(0%, 69%, 93%, 38%)
Oklch
oklch(47.1% 0.150 37.1)

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

#B64621

Tangerine · Sienna · Amber Brown

HEX
#B64621
RGB
rgb(182, 70, 33)
HSL
hsl(15, 69%, 42%)
HSB
hsb(15, 82%, 71%)
CMYK
cmyk(0%, 62%, 82%, 29%)
Oklch
oklch(54.1% 0.154 37.8)

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

#FAFFD4

Fresh Green · LightYellow · Lemon Cream

HEX
#FAFFD4
RGB
rgb(250, 255, 212)
HSL
hsl(67, 100%, 92%)
HSB
hsb(67, 17%, 100%)
CMYK
cmyk(2%, 0%, 17%, 0%)
Oklch
oklch(98.5% 0.056 112.8)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#5DAF99

Mineral Blue · CadetBlue · Lake Green

HEX
#5DAF99
RGB
rgb(93, 175, 153)
HSL
hsl(164, 34%, 53%)
HSB
hsb(164, 47%, 69%)
CMYK
cmyk(47%, 0%, 13%, 31%)
Oklch
oklch(69.6% 0.088 174.1)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#1B1F22

Slate Blue · Black · Deep Sea Blue

HEX
#1B1F22
RGB
rgb(27, 31, 34)
HSL
hsl(206, 11%, 12%)
HSB
hsb(206, 21%, 13%)
CMYK
cmyk(21%, 9%, 0%, 87%)
Oklch
oklch(23.6% 0.008 240.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9D310B
0B769D

Analogous

9D0B2D
9D310B
9D7B0B

Triadic

9D310B
0B9D32
320B9D

Split-Comp.

9D310B
0B9D7B
0B2D9D

Tetradic

9D310B
2D9D0B
0B769D
7B0B9D

Contrast Matrix WCAG 2.1 Contrast

9D310B
B64621
FAFFD4
5DAF99
1B1F22
—
1.4
Fail
7.1
AAA
2.8
Fail
2.3
Fail
1.4
Fail
—
5.2
AA
2.1
Fail
3.1
AA Large
7.1
AAA
5.2
AA
—
2.5
Fail
16.1
AAA
2.8
Fail
2.1
Fail
2.5
Fail
—
6.4
AA
2.3
Fail
3.1
AA Large
16.1
AAA
6.4
AA
—
White BG
7.3AAA
5.4AA
1.0Fail
2.6Fail
16.6AAA
Black BG
2.9Fail
3.9AA Large
20.3AAA
8.1AAA
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6E6D14
86842A
FCFCDE
81819E
1D1D21

Deuteranopia

757D16
8C942C
FCFCE1
7C76A0
1D1C21

Tritanopia

981B1D
B03133
FAE7E8
61A3A3
1B2121

Achromatopsia

4D4D4D
636363
F9F9F9
949494
1E1E1E

Shades & Tints Shades & Tints

#9D310B

Dark
Light

#B64621

Dark
Light

#FAFFD4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9d310b;
  --color-2: #b64621;
  --color-3: #faffd4;
  --color-4: #5daf99;
  --color-5: #1b1f22;
}

SCSS

$color-1: #9d310b;
$color-2: #b64621;
$color-3: #faffd4;
$color-4: #5daf99;
$color-5: #1b1f22;

TAILWIND

colors: {
  'brand-1': '#9d310b',
  'brand-2': '#b64621',
  'brand-3': '#faffd4',
  'brand-4': '#5daf99',
  'brand-5': '#1b1f22',
}

RGB Array

[157, 49, 11], [182, 70, 33], [250, 255, 212], [93, 175, 153], [27, 31, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9D310B, #B64621, #FAFFD4, #5DAF99, #1B1F22 is ideal for: social media posters, mobile apps, e-commerce promos, 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: #9d310b; --color-2: #b64621; --color-3: #faffd4; --color-4: #5daf99; --color-5: #1b1f22. 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 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