#036564 + #0B8C8F + #909078 + #FF0066 + #333333 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#036564

Mineral Blue · Teal · Peacock Green

HEX

#036564

RGB

rgb(3, 101, 100)

HSL

hsl(179, 94%, 20%)

HSB

hsb(179, 97%, 40%)

CMYK

cmyk(97%, 0%, 1%, 60%)

Oklch

oklch(45.9% 0.078 193.6)

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

#0B8C8F

Lake Blue · Teal · Mint Ice

HEX

#0B8C8F

RGB

rgb(11, 140, 143)

HSL

hsl(181, 86%, 30%)

HSB

hsb(181, 92%, 56%)

CMYK

cmyk(92%, 2%, 0%, 44%)

Oklch

oklch(58.2% 0.097 197.5)

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

#909078

Autumn Sage · Gray · Sunflower

HEX

#909078

RGB

rgb(144, 144, 120)

HSL

hsl(60, 10%, 52%)

HSB

hsb(60, 17%, 56%)

CMYK

cmyk(0%, 0%, 17%, 44%)

Oklch

oklch(64.7% 0.034 107.3)

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

#FF0066

Dark Violet · DeepPink · Camellia

HEX

#FF0066

RGB

rgb(255, 0, 102)

HSL

hsl(336, 100%, 50%)

HSB

hsb(336, 100%, 100%)

CMYK

cmyk(0%, 100%, 60%, 0%)

Oklch

oklch(63.9% 0.255 10.5)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#333333

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#333333

RGB

rgb(51, 51, 51)

HSL

hsl(0, 0%, 20%)

HSB

hsb(0, 0%, 20%)

CMYK

cmyk(0%, 0%, 0%, 80%)

Oklch

oklch(32.1% 0.000 89.9)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

036564

630305

Analogous

036331

036564

033563

Triadic

036564

610363

636103

Split-Comp.

036564

630335

633103

Tetradic

036564

310363

630305

356303

Contrast Matrix WCAG 2.1 Contrast

036564	0B8C8F	909078	FF0066	333333
—	1.7 Fail	2.1 Fail	1.8 Fail	1.8 Fail
1.7 Fail	—	1.2 Fail	1.1 Fail	3.1 AA Large
2.1 Fail	1.2 Fail	—	1.2 Fail	3.9 AA Large
1.8 Fail	1.1 Fail	1.2 Fail	—	3.3 AA Large
1.8 Fail	3.1 AA Large	3.9 AA Large	3.3 AA Large	—

White BG

6.9AA

4.1AA Large

3.3AA Large

3.9AA Large

12.6AAA

Black BG

3.0AA Large

5.2AA

6.4AA

5.4AA

1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

2D2E64

43448E

90907E

918E4D

333333

Deuteranopia

282064

3B328E

90907F

9FB347

333333

Tritanopia

086464

118E8E

908283

F23A36

333333

Achromatopsia

484848

666666

8D8D8D

585858

333333

Shades & Tints Shades & Tints

#036564

Dark

Light

#0B8C8F

Dark

Light

#909078

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #036564;
  --color-2: #0b8c8f;
  --color-3: #909078;
  --color-4: #ff0066;
  --color-5: #333333;
}

SCSS

$color-1: #036564;
$color-2: #0b8c8f;
$color-3: #909078;
$color-4: #ff0066;
$color-5: #333333;

TAILWIND

colors: {
  'brand-1': '#036564',
  'brand-2': '#0b8c8f',
  'brand-3': '#909078',
  'brand-4': '#ff0066',
  'brand-5': '#333333',
}

RGB Array

[3, 101, 100], [11, 140, 143], [144, 144, 120], [255, 0, 102], [51, 51, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #036564, #0B8C8F, #909078, #FF0066, #333333 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: #036564; --color-2: #0b8c8f; --color-3: #909078; --color-4: #ff0066; --color-5: #333333. 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