← Back to Editor

#FABB22 · #D15330 · #1C1910 · #586D9A · #75912B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#FABB22

Ginger · GoldenRod · Sunflower

HEX
#FABB22
RGB
rgb(250, 187, 34)
HSL
hsl(43, 96%, 56%)
HSB
hsb(43, 86%, 98%)
CMYK
cmyk(0%, 25%, 86%, 2%)
Oklch
oklch(82.8% 0.164 82.8)

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

#D15330

Vermilion · Chocolate · Passion Red

HEX
#D15330
RGB
rgb(209, 83, 48)
HSL
hsl(13, 64%, 50%)
HSB
hsb(13, 77%, 82%)
CMYK
cmyk(0%, 60%, 77%, 18%)
Oklch
oklch(60.3% 0.167 36.2)

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

#1C1910

Ochre · Black · Amber Gold

HEX
#1C1910
RGB
rgb(28, 25, 16)
HSL
hsl(45, 27%, 9%)
HSB
hsb(45, 43%, 11%)
CMYK
cmyk(0%, 11%, 43%, 89%)
Oklch
oklch(21.4% 0.017 91.8)

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

#586D9A

Indigo · SlateGray · Navy Blue

HEX
#586D9A
RGB
rgb(88, 109, 154)
HSL
hsl(221, 27%, 47%)
HSB
hsb(221, 43%, 60%)
CMYK
cmyk(43%, 29%, 0%, 40%)
Oklch
oklch(53.7% 0.075 264.8)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#75912B

Grass Green · Olive · Forest Green

HEX
#75912B
RGB
rgb(117, 145, 43)
HSL
hsl(76, 54%, 37%)
HSB
hsb(76, 70%, 57%)
CMYK
cmyk(19%, 0%, 70%, 43%)
Oklch
oklch(61.5% 0.131 123.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FABB22
2360FB

Analogous

FB5223
FABB22
CCFB23

Triadic

FABB22
23FBBD
BD23FB

Split-Comp.

FABB22
23CCFB
5223FB

Tetradic

FABB22
23FB52
2360FB
FB23CC

Contrast Matrix WCAG 2.1 Contrast

FABB22
D15330
1C1910
586D9A
75912B
—
2.4
Fail
10.2
AAA
3.0
Fail
2.1
Fail
2.4
Fail
—
4.2
AA Large
1.2
Fail
1.2
Fail
10.2
AAA
4.2
AA Large
—
3.4
AA Large
4.9
AA
3.0
Fail
1.2
Fail
3.4
AA Large
—
1.4
Fail
2.1
Fail
1.2
Fail
4.9
AA
1.4
Fail
—
White BG
1.7Fail
4.2AA Large
17.6AAA
5.2AA
3.6AA Large
Black BG
12.2AAA
5.0AA
1.2Fail
4.1AA Large
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DFDE47
9A9938
1B1B12
61618F
818144

Deuteranopia

E2E750
A2AB3A
1B1B13
605E8D
807D4A

Tritanopia

F7646B
CB3F41
1C1414
598785
76575B

Achromatopsia

BCBCBC
757575
191919
6C6C6C
7D7D7D

Shades & Tints Shades & Tints

#FABB22

Dark
Light

#D15330

Dark
Light

#1C1910

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fabb22;
  --color-2: #d15330;
  --color-3: #1c1910;
  --color-4: #586d9a;
  --color-5: #75912b;
}

SCSS

$color-1: #fabb22;
$color-2: #d15330;
$color-3: #1c1910;
$color-4: #586d9a;
$color-5: #75912b;

TAILWIND

colors: {
  'brand-1': '#fabb22',
  'brand-2': '#d15330',
  'brand-3': '#1c1910',
  'brand-4': '#586d9a',
  'brand-5': '#75912b',
}

RGB Array

[250, 187, 34], [209, 83, 48], [28, 25, 16], [88, 109, 154], [117, 145, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FABB22, #D15330, #1C1910, #586D9A, #75912B is ideal for: tech websites, dark mode UIs, game UIs, 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: #fabb22; --color-2: #d15330; --color-3: #1c1910; --color-4: #586d9a; --color-5: #75912b. 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 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