← Back to Editor

#FFD675 · #120201 · #00877A · #A3774B · #A3907C

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

#FFD675

Goose Yellow · Khaki · Sunflower

HEX
#FFD675
RGB
rgb(255, 214, 117)
HSL
hsl(42, 100%, 73%)
HSB
hsb(42, 54%, 100%)
CMYK
cmyk(0%, 16%, 54%, 0%)
Oklch
oklch(89.2% 0.125 86.9)

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

#120201

Vermilion · Black · Deep Berry

HEX
#120201
RGB
rgb(18, 2, 1)
HSL
hsl(4, 89%, 4%)
HSB
hsb(4, 94%, 7%)
CMYK
cmyk(0%, 89%, 94%, 93%)
Oklch
oklch(12.5% 0.038 31.5)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#00877A

Mineral Blue · Teal · Mint Ice

HEX
#00877A
RGB
rgb(0, 135, 122)
HSL
hsl(174, 100%, 26%)
HSB
hsb(174, 100%, 53%)
CMYK
cmyk(100%, 0%, 10%, 47%)
Oklch
oklch(56.0% 0.100 183.1)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#A3774B

Ochre · Sienna · Amber Brown

HEX
#A3774B
RGB
rgb(163, 119, 75)
HSL
hsl(30, 37%, 47%)
HSB
hsb(30, 54%, 64%)
CMYK
cmyk(0%, 27%, 54%, 36%)
Oklch
oklch(60.3% 0.081 65.2)

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

#A3907C

Ginger · Gray · Warm Sun

HEX
#A3907C
RGB
rgb(163, 144, 124)
HSL
hsl(31, 17%, 56%)
HSB
hsb(31, 24%, 64%)
CMYK
cmyk(0%, 12%, 24%, 36%)
Oklch
oklch(66.5% 0.037 68.6)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFD675
759FFF

Analogous

FF9175
FFD675
E3FF75

Triadic

FFD675
75FFD6
D675FF

Split-Comp.

FFD675
75E3FF
9175FF

Tetradic

FFD675
75FF91
759FFF
FF75E3

Contrast Matrix WCAG 2.1 Contrast

FFD675
120201
00877A
A3774B
A3907C
—
14.6
AAA
3.2
AA Large
2.9
Fail
2.2
Fail
14.6
AAA
—
4.6
AA
5.1
AA
6.6
AA
3.2
AA Large
4.6
AA
—
1.1
Fail
1.4
Fail
2.9
Fail
5.1
AA
1.1
Fail
—
1.3
Fail
2.2
Fail
6.6
AA
1.4
Fail
1.3
Fail
—
White BG
1.4Fail
20.3AAA
4.4AA Large
4.0AA Large
3.1AA Large
Black BG
15.1AAA
1.0Fail
4.7AA
5.3AA
6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDED8C
0B0B01
3A3C7D
909056
9B9B81

Deuteranopia

F0F392
0C0D01
33297E
939658
9C9D82

Tritanopia

FD9FA3
110101
078080
A15E60
A28586

Achromatopsia

D7D7D7
070707
5D5D5D
7F7F7F
939393

Shades & Tints Shades & Tints

#FFD675

Dark
Light

#120201

Dark
Light

#00877A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffd675;
  --color-2: #120201;
  --color-3: #00877a;
  --color-4: #a3774b;
  --color-5: #a3907c;
}

SCSS

$color-1: #ffd675;
$color-2: #120201;
$color-3: #00877a;
$color-4: #a3774b;
$color-5: #a3907c;

TAILWIND

colors: {
  'brand-1': '#ffd675',
  'brand-2': '#120201',
  'brand-3': '#00877a',
  'brand-4': '#a3774b',
  'brand-5': '#a3907c',
}

RGB Array

[255, 214, 117], [18, 2, 1], [0, 135, 122], [163, 119, 75], [163, 144, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFD675, #120201, #00877A, #A3774B, #A3907C 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: #ffd675; --color-2: #120201; --color-3: #00877a; --color-4: #a3774b; --color-5: #a3907c. 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