← Back to Editor

#FAC440 · #1D1F2C · #152C60 · #2D467C · #97B0C4

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

#FAC440

Ginger · SandyBrown · Sunflower

HEX
#FAC440
RGB
rgb(250, 196, 64)
HSL
hsl(43, 95%, 62%)
HSB
hsb(43, 74%, 98%)
CMYK
cmyk(0%, 22%, 74%, 2%)
Oklch
oklch(84.7% 0.154 85.4)

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

#1D1F2C

Indigo · Black · Deep Sea Blue

HEX
#1D1F2C
RGB
rgb(29, 31, 44)
HSL
hsl(232, 21%, 14%)
HSB
hsb(232, 34%, 17%)
CMYK
cmyk(34%, 30%, 0%, 83%)
Oklch
oklch(24.3% 0.025 277.6)

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

#152C60

Indigo · MidnightBlue · Prussian Blue

HEX
#152C60
RGB
rgb(21, 44, 96)
HSL
hsl(222, 64%, 23%)
HSB
hsb(222, 78%, 38%)
CMYK
cmyk(78%, 54%, 0%, 62%)
Oklch
oklch(30.8% 0.097 263.7)

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

#2D467C

Indigo · DarkSlateBlue · Prussian Blue

HEX
#2D467C
RGB
rgb(45, 70, 124)
HSL
hsl(221, 47%, 33%)
HSB
hsb(221, 64%, 49%)
CMYK
cmyk(64%, 44%, 0%, 51%)
Oklch
oklch(40.3% 0.096 263.9)

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

#97B0C4

Sky Blue · DarkGray · Cobalt Blue

HEX
#97B0C4
RGB
rgb(151, 176, 196)
HSL
hsl(207, 28%, 68%)
HSB
hsb(207, 23%, 77%)
CMYK
cmyk(23%, 10%, 0%, 23%)
Oklch
oklch(74.5% 0.040 242.3)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FAC440
4276FA

Analogous

FA6A42
FAC440
D2FA42

Triadic

FAC440
42FAC6
C642FA

Split-Comp.

FAC440
42D2FA
6A42FA

Tetradic

FAC440
42FA6A
4276FA
FA42D2

Contrast Matrix WCAG 2.1 Contrast

FAC440
1D1F2C
152C60
2D467C
97B0C4
—
10.1
AAA
8.3
AAA
5.7
AA
1.4
Fail
10.1
AAA
—
1.2
Fail
1.8
Fail
7.3
AAA
8.3
AAA
1.2
Fail
—
1.5
Fail
6.0
AA
5.7
AA
1.8
Fail
1.5
Fail
—
4.1
AA Large
1.4
Fail
7.3
AAA
6.0
AA
4.1
AA Large
—
White BG
1.6Fail
16.3AAA
13.5AAA
9.2AAA
2.3Fail
Black BG
13.0AAA
1.3Fail
1.6Fail
2.3Fail
9.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E260
1E1E29
1F1F53
38386F
A2A2BF

Deuteranopia

E6EA68
1E1E28
1E1C50
36356C
A09FBE

Tritanopia

F7797F
1D2626
164947
2E6562
98BBBB

Achromatopsia

C5C5C5
202020
2B2B2B
454545
ABABAB

Shades & Tints Shades & Tints

#FAC440

Dark
Light

#1D1F2C

Dark
Light

#152C60

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fac440;
  --color-2: #1d1f2c;
  --color-3: #152c60;
  --color-4: #2d467c;
  --color-5: #97b0c4;
}

SCSS

$color-1: #fac440;
$color-2: #1d1f2c;
$color-3: #152c60;
$color-4: #2d467c;
$color-5: #97b0c4;

TAILWIND

colors: {
  'brand-1': '#fac440',
  'brand-2': '#1d1f2c',
  'brand-3': '#152c60',
  'brand-4': '#2d467c',
  'brand-5': '#97b0c4',
}

RGB Array

[250, 196, 64], [29, 31, 44], [21, 44, 96], [45, 70, 124], [151, 176, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FAC440, #1D1F2C, #152C60, #2D467C, #97B0C4 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: #fac440; --color-2: #1d1f2c; --color-3: #152c60; --color-4: #2d467c; --color-5: #97b0c4. 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