#0CAB82 + #222121 + #255863 + #059286 + #0C0A0B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#0CAB82

Mineral Blue · Teal · Mint Ice

HEX

#0CAB82

RGB

rgb(12, 171, 130)

HSL

hsl(165, 87%, 36%)

HSB

hsb(165, 93%, 67%)

CMYK

cmyk(93%, 0%, 24%, 33%)

Oklch

oklch(65.9% 0.132 167.8)

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

#222121

Ink Black · Black · Dark Stone

HEX

#222121

RGB

rgb(34, 33, 33)

HSL

hsl(0, 1%, 13%)

HSB

hsb(0, 3%, 13%)

CMYK

cmyk(0%, 3%, 3%, 87%)

Oklch

oklch(24.9% 0.002 17.3)

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

#255863

Slate Blue · DarkSlateGray · Mint Ice

HEX

#255863

RGB

rgb(37, 88, 99)

HSL

hsl(191, 46%, 27%)

HSB

hsb(191, 63%, 39%)

CMYK

cmyk(63%, 11%, 0%, 61%)

Oklch

oklch(43.0% 0.057 214.0)

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

#059286

Mineral Blue · Teal · Mint Ice

HEX

#059286

RGB

rgb(5, 146, 134)

HSL

hsl(175, 93%, 30%)

HSB

hsb(175, 97%, 57%)

CMYK

cmyk(97%, 0%, 8%, 43%)

Oklch

oklch(59.4% 0.104 184.7)

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

#0C0A0B

Dark Violet · Black · Jet Black

HEX

#0C0A0B

RGB

rgb(12, 10, 11)

HSL

hsl(330, 9%, 4%)

HSB

hsb(330, 17%, 5%)

CMYK

cmyk(0%, 17%, 8%, 95%)

Oklch

oklch(14.8% 0.004 345.9)

Traditional「Dark Violet」· Paint「Jet Black」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0CAB82

AC0C34

Analogous

0CAC34

0CAB82

0C84AC

Triadic

0CAB82

840CAC

AC840C

Split-Comp.

0CAB82

AC0C84

AC340C

Tetradic

0CAB82

340CAC

AC0C34

84AC0C

Contrast Matrix WCAG 2.1 Contrast

0CAB82	222121	255863	059286	0C0A0B
—	5.5 AA	2.7 Fail	1.3 Fail	6.7 AA
5.5 AA	—	2.0 Fail	4.2 AA Large	1.2 Fail
2.7 Fail	2.0 Fail	—	2.1 Fail	2.5 Fail
1.3 Fail	4.2 AA Large	2.1 Fail	—	5.1 AA
6.7 AA	1.2 Fail	2.5 Fail	5.1 AA	—

White BG

2.9Fail

16.1AAA

7.9AAA

3.8AA Large

19.7AAA

Black BG

7.2AAA

1.3Fail

2.7Fail

5.5AA

1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

51528C

222221

3B3C60

424389

0B0B0B

Deuteranopia

483C8E

222221

383460

3A2F8A

0B0B0B

Tritanopia

149495

222121

285E5E

0C8B8C

0C0B0B

Achromatopsia

777777

212121

4A4A4A

666666

0B0B0B

Shades & Tints Shades & Tints

#0CAB82

Dark

Light

#222121

Dark

Light

#255863

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0cab82;
  --color-2: #222121;
  --color-3: #255863;
  --color-4: #059286;
  --color-5: #0c0a0b;
}

SCSS

$color-1: #0cab82;
$color-2: #222121;
$color-3: #255863;
$color-4: #059286;
$color-5: #0c0a0b;

TAILWIND

colors: {
  'brand-1': '#0cab82',
  'brand-2': '#222121',
  'brand-3': '#255863',
  'brand-4': '#059286',
  'brand-5': '#0c0a0b',
}

RGB Array

[12, 171, 130], [34, 33, 33], [37, 88, 99], [5, 146, 134], [12, 10, 11]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0CAB82, #222121, #255863, #059286, #0C0A0B 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: #0cab82; --color-2: #222121; --color-3: #255863; --color-4: #059286; --color-5: #0c0a0b. 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