← Back to Editor

#210D12 · #2F9C88 · #452E32 · #037365 · #BABA56

warm

A 5-color warm 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

#210D12

Crimson · Black · Deep Berry

HEX
#210D12
RGB
rgb(33, 13, 18)
HSL
hsl(345, 43%, 9%)
HSB
hsb(345, 61%, 13%)
CMYK
cmyk(0%, 61%, 45%, 87%)
Oklch
oklch(19.2% 0.035 4.9)

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

#2F9C88

Mineral Blue · MediumSeaGreen · Mint Ice

HEX
#2F9C88
RGB
rgb(47, 156, 136)
HSL
hsl(169, 54%, 40%)
HSB
hsb(169, 70%, 61%)
CMYK
cmyk(70%, 0%, 13%, 39%)
Oklch
oklch(62.7% 0.101 177.9)

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

#452E32

Crimson · DarkSlateGray · Wine Red

HEX
#452E32
RGB
rgb(69, 46, 50)
HSL
hsl(350, 20%, 23%)
HSB
hsb(350, 33%, 27%)
CMYK
cmyk(0%, 33%, 28%, 73%)
Oklch
oklch(33.0% 0.034 7.6)

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

#037365

Mineral Blue · Teal · Peacock Green

HEX
#037365
RGB
rgb(3, 115, 101)
HSL
hsl(173, 95%, 23%)
HSB
hsb(173, 97%, 45%)
CMYK
cmyk(97%, 0%, 12%, 55%)
Oklch
oklch(49.8% 0.089 180.4)

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

#BABA56

Autumn Sage · Tan · Sunflower

HEX
#BABA56
RGB
rgb(186, 186, 86)
HSL
hsl(60, 42%, 53%)
HSB
hsb(60, 54%, 73%)
CMYK
cmyk(0%, 0%, 54%, 27%)
Oklch
oklch(76.9% 0.123 109.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

210D12
0D211C

Analogous

210D1C
210D12
21120D

Triadic

210D12
12210D
0D1221

Split-Comp.

210D12
0D2112
0D1C21

Tetradic

210D12
1C210D
0D211C
120D21

Contrast Matrix WCAG 2.1 Contrast

210D12
2F9C88
452E32
037365
BABA56
—
5.5
AA
1.5
Fail
3.2
AA Large
9.1
AAA
5.5
AA
—
3.7
AA Large
1.7
Fail
1.6
Fail
1.5
Fail
3.7
AA Large
—
2.2
Fail
6.1
AA
3.2
AA Large
1.7
Fail
2.2
Fail
—
2.8
Fail
9.1
AAA
1.6
Fail
6.1
AA
2.8
Fail
—
White BG
18.6AAA
3.4AA Large
12.4AAA
5.8AA
2.0Fail
Black BG
1.1Fail
6.2AA
1.7Fail
3.6AA Large
10.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

181811
5E5F8D
3B3B31
333568
BABA6E

Deuteranopia

1A1B11
58508E
3C3E31
2D2569
BABA74

Tritanopia

201010
349192
443030
096B6C
BA8186

Achromatopsia

141414
797979
353535
505050
AFAFAF

Shades & Tints Shades & Tints

#210D12

Dark
Light

#2F9C88

Dark
Light

#452E32

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #210d12;
  --color-2: #2f9c88;
  --color-3: #452e32;
  --color-4: #037365;
  --color-5: #baba56;
}

SCSS

$color-1: #210d12;
$color-2: #2f9c88;
$color-3: #452e32;
$color-4: #037365;
$color-5: #baba56;

TAILWIND

colors: {
  'brand-1': '#210d12',
  'brand-2': '#2f9c88',
  'brand-3': '#452e32',
  'brand-4': '#037365',
  'brand-5': '#baba56',
}

RGB Array

[33, 13, 18], [47, 156, 136], [69, 46, 50], [3, 115, 101], [186, 186, 86]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #210D12, #2F9C88, #452E32, #037365, #BABA56 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: #210d12; --color-2: #2f9c88; --color-3: #452e32; --color-4: #037365; --color-5: #baba56. 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 warm-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