← Back to Editor

#1F2933 · #B5A772 · #CCBF8F · #CC9376 · #C23E3E

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

#1F2933

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#1F2933
RGB
rgb(31, 41, 51)
HSL
hsl(210, 24%, 16%)
HSB
hsb(210, 39%, 20%)
CMYK
cmyk(39%, 20%, 0%, 80%)
Oklch
oklch(27.6% 0.023 248.7)

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

#B5A772

Ginger · Tan · Sunflower

HEX
#B5A772
RGB
rgb(181, 167, 114)
HSL
hsl(47, 31%, 58%)
HSB
hsb(47, 37%, 71%)
CMYK
cmyk(0%, 8%, 37%, 29%)
Oklch
oklch(72.8% 0.073 95.1)

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

#CCBF8F

Ginger · Tan · Sunflower

HEX
#CCBF8F
RGB
rgb(204, 191, 143)
HSL
hsl(47, 37%, 68%)
HSB
hsb(47, 30%, 80%)
CMYK
cmyk(0%, 6%, 30%, 20%)
Oklch
oklch(80.4% 0.065 94.7)

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

#CC9376

Apricot · DarkSalmon · Warm Sun

HEX
#CC9376
RGB
rgb(204, 147, 118)
HSL
hsl(20, 46%, 63%)
HSB
hsb(20, 42%, 80%)
CMYK
cmyk(0%, 28%, 42%, 20%)
Oklch
oklch(71.2% 0.080 48.0)

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

#C23E3E

Crimson · Brown · Passion Red

HEX
#C23E3E
RGB
rgb(194, 62, 62)
HSL
hsl(0, 52%, 50%)
HSB
hsb(0, 68%, 76%)
CMYK
cmyk(0%, 68%, 68%, 24%)
Oklch
oklch(55.5% 0.169 24.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1F2933
33291F

Analogous

1F3333
1F2933
1F1F33

Triadic

1F2933
331F29
29331F

Split-Comp.

1F2933
331F1F
33331F

Tetradic

1F2933
331F33
33291F
1F331F

Contrast Matrix WCAG 2.1 Contrast

1F2933
B5A772
CCBF8F
CC9376
C23E3E
—
6.1
AA
8.0
AAA
5.6
AA
2.8
Fail
6.1
AA
—
1.3
Fail
1.1
Fail
2.2
Fail
8.0
AAA
1.3
Fail
—
1.4
Fail
2.8
Fail
5.6
AA
1.1
Fail
1.4
Fail
—
2.0
Fail
2.8
Fail
2.2
Fail
2.8
Fail
2.0
Fail
—
White BG
14.8AAA
2.4Fail
1.8Fail
2.6Fail
5.2AA
Black BG
1.4Fail
8.7AAA
11.4AAA
8.0AAA
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

232331
AFAF7F
C6C69B
B3B37D
89883E

Deuteranopia

232230
B0B182
C7C89D
B7BB7F
919A3E

Tritanopia

202F2E
B4898B
CBA4A6
C98384
BB3E3E

Achromatopsia

272727
A5A5A5
BDBDBD
A1A1A1
656565

Shades & Tints Shades & Tints

#1F2933

Dark
Light

#B5A772

Dark
Light

#CCBF8F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1f2933;
  --color-2: #b5a772;
  --color-3: #ccbf8f;
  --color-4: #cc9376;
  --color-5: #c23e3e;
}

SCSS

$color-1: #1f2933;
$color-2: #b5a772;
$color-3: #ccbf8f;
$color-4: #cc9376;
$color-5: #c23e3e;

TAILWIND

colors: {
  'brand-1': '#1f2933',
  'brand-2': '#b5a772',
  'brand-3': '#ccbf8f',
  'brand-4': '#cc9376',
  'brand-5': '#c23e3e',
}

RGB Array

[31, 41, 51], [181, 167, 114], [204, 191, 143], [204, 147, 118], [194, 62, 62]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1F2933, #B5A772, #CCBF8F, #CC9376, #C23E3E 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: #1f2933; --color-2: #b5a772; --color-3: #ccbf8f; --color-4: #cc9376; --color-5: #c23e3e. 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