#22150C + #1D2925 + #183E3F + #125258 + #0D6671 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#22150C

Tangerine · Black · Cinnamon

HEX

#22150C

RGB

rgb(34, 21, 12)

HSL

hsl(25, 48%, 9%)

HSB

hsb(25, 65%, 13%)

CMYK

cmyk(0%, 38%, 65%, 87%)

Oklch

oklch(21.0% 0.027 55.4)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#1D2925

Mineral Blue · DarkSlateGray · Peacock Green

HEX

#1D2925

RGB

rgb(29, 41, 37)

HSL

hsl(160, 17%, 14%)

HSB

hsb(160, 29%, 16%)

CMYK

cmyk(29%, 0%, 10%, 84%)

Oklch

oklch(26.8% 0.018 172.4)

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

#183E3F

Slate Blue · DarkSlateGray · Peacock Green

HEX

#183E3F

RGB

rgb(24, 62, 63)

HSL

hsl(182, 45%, 17%)

HSB

hsb(182, 62%, 25%)

CMYK

cmyk(62%, 2%, 0%, 75%)

Oklch

oklch(33.7% 0.043 197.7)

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

#125258

Lake Blue · DarkSlateGray · Peacock Green

HEX

#125258

RGB

rgb(18, 82, 88)

HSL

hsl(185, 66%, 21%)

HSB

hsb(185, 80%, 35%)

CMYK

cmyk(80%, 7%, 0%, 65%)

Oklch

oklch(40.3% 0.062 204.4)

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

#0D6671

Lake Blue · Teal · Peacock Green

HEX

#0D6671

RGB

rgb(13, 102, 113)

HSL

hsl(187, 79%, 25%)

HSB

hsb(187, 88%, 44%)

CMYK

cmyk(88%, 10%, 0%, 56%)

Oklch

oklch(46.8% 0.077 208.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

22150C

0C1922

Analogous

220C0E

22150C

22200C

Triadic

22150C

0C2215

150C22

Split-Comp.

22150C

0C2220

0C0E22

Tetradic

22150C

0E220C

0C1922

200C22

Contrast Matrix WCAG 2.1 Contrast

22150C	1D2925	183E3F	125258	0D6671
—	1.2 Fail	1.5 Fail	2.0 Fail	2.7 Fail
1.2 Fail	—	1.3 Fail	1.7 Fail	2.3 Fail
1.5 Fail	1.3 Fail	—	1.3 Fail	1.8 Fail
2.0 Fail	1.7 Fail	1.3 Fail	—	1.3 Fail
2.7 Fail	2.3 Fail	1.8 Fail	1.3 Fail	—

White BG

17.8AAA

15.0AAA

11.7AAA

8.8AAA

6.7AA

Black BG

1.2Fail

1.4Fail

1.8Fail

2.4Fail

3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

1C1C0E

222226

28293F

2E2E57

34346E

Deuteranopia

1D1E0F

222126

26233F

2A2556

2E286E

Tritanopia

211010

1E2727

1A3F3F

155555

116C6C

Achromatopsia

181818

252525

333333

404040

4D4D4D

Shades & Tints Shades & Tints

#22150C

Dark

Light

#1D2925

Dark

Light

#183E3F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #22150c;
  --color-2: #1d2925;
  --color-3: #183e3f;
  --color-4: #125258;
  --color-5: #0d6671;
}

SCSS

$color-1: #22150c;
$color-2: #1d2925;
$color-3: #183e3f;
$color-4: #125258;
$color-5: #0d6671;

TAILWIND

colors: {
  'brand-1': '#22150c',
  'brand-2': '#1d2925',
  'brand-3': '#183e3f',
  'brand-4': '#125258',
  'brand-5': '#0d6671',
}

RGB Array

[34, 21, 12], [29, 41, 37], [24, 62, 63], [18, 82, 88], [13, 102, 113]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #22150C, #1D2925, #183E3F, #125258, #0D6671 is ideal for: tech websites, dark mode UIs, game UIs. 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: #22150c; --color-2: #1d2925; --color-3: #183e3f; --color-4: #125258; --color-5: #0d6671. 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. 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