#12A09A + #136770 + #262621 + #993220 + #D43D24 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#12A09A

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#12A09A

RGB

rgb(18, 160, 154)

HSL

hsl(177, 80%, 35%)

HSB

hsb(177, 89%, 63%)

CMYK

cmyk(89%, 0%, 4%, 37%)

Oklch

oklch(63.8% 0.107 190.0)

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

#136770

Lake Blue · Teal · Mint Ice

HEX

#136770

RGB

rgb(19, 103, 112)

HSL

hsl(186, 71%, 26%)

HSB

hsb(186, 83%, 44%)

CMYK

cmyk(83%, 8%, 0%, 56%)

Oklch

oklch(47.1% 0.075 206.1)

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

#262621

Ink Black · DarkSlateGray · Dark Stone

HEX

#262621

RGB

rgb(38, 38, 33)

HSL

hsl(60, 7%, 14%)

HSB

hsb(60, 13%, 15%)

CMYK

cmyk(0%, 0%, 13%, 85%)

Oklch

oklch(26.7% 0.009 107.0)

Traditional「Ink Black」· Paint「Dark Stone」· Creative Midnight Shadow

#993220

Vermilion · Brown · Wine Red

HEX

#993220

RGB

rgb(153, 50, 32)

HSL

hsl(9, 65%, 36%)

HSB

hsb(9, 79%, 60%)

CMYK

cmyk(0%, 67%, 79%, 40%)

Oklch

oklch(46.7% 0.141 32.3)

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

#D43D24

Vermilion · FireBrick · Passion Red

HEX

#D43D24

RGB

rgb(212, 61, 36)

HSL

hsl(9, 71%, 49%)

HSB

hsb(9, 83%, 83%)

CMYK

cmyk(0%, 71%, 83%, 17%)

Oklch

oklch(58.1% 0.192 32.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

12A09A

A11219

Analogous

12A152

12A09A

1260A1

Triadic

12A09A

9A12A1

A19A12

Split-Comp.

12A09A

A11260

A15212

Tetradic

12A09A

5212A1

A11219

60A112

Contrast Matrix WCAG 2.1 Contrast

12A09A	136770	262621	993220	D43D24
—	2.0 Fail	4.7 AA	2.3 Fail	1.5 Fail
2.0 Fail	—	2.3 Fail	1.1 Fail	1.4 Fail
4.7 AA	2.3 Fail	—	2.0 Fail	3.3 AA Large
2.3 Fail	1.1 Fail	2.0 Fail	—	1.6 Fail
1.5 Fail	1.4 Fail	3.3 AA Large	1.6 Fail	—

White BG

3.2AA Large

6.6AA

15.2AAA

7.4AAA

4.7AA

Black BG

6.5AA

3.2AA Large

1.4Fail

2.8Fail

4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

4F519B

37386E

262622

6C6B24

93912A

Deuteranopia

473D9C

332C6D

262623

727A25

9BA72C

Tritanopia

199D9D

176C6C

262323

942829

CC2F30

Achromatopsia

757575

4F4F4F

252525

4F4F4F

676767

Shades & Tints Shades & Tints

#12A09A

Dark

Light

#136770

Dark

Light

#262621

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #12a09a;
  --color-2: #136770;
  --color-3: #262621;
  --color-4: #993220;
  --color-5: #d43d24;
}

SCSS

$color-1: #12a09a;
$color-2: #136770;
$color-3: #262621;
$color-4: #993220;
$color-5: #d43d24;

TAILWIND

colors: {
  'brand-1': '#12a09a',
  'brand-2': '#136770',
  'brand-3': '#262621',
  'brand-4': '#993220',
  'brand-5': '#d43d24',
}

RGB Array

[18, 160, 154], [19, 103, 112], [38, 38, 33], [153, 50, 32], [212, 61, 36]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #12A09A, #136770, #262621, #993220, #D43D24 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: #12a09a; --color-2: #136770; --color-3: #262621; --color-4: #993220; --color-5: #d43d24. 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