#00CCCC + #1AA6B3 + #338099 + #4D5880 + #663266 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#00CCCC

Lake Blue · DarkTurquoise · Mint Ice

HEX

#00CCCC

RGB

rgb(0, 204, 204)

HSL

hsl(180, 100%, 40%)

HSB

hsb(180, 100%, 80%)

CMYK

cmyk(100%, 0%, 0%, 20%)

Oklch

oklch(76.5% 0.131 194.8)

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

#1AA6B3

Lake Blue · LightSeaGreen · Mint Ice

HEX

#1AA6B3

RGB

rgb(26, 166, 179)

HSL

hsl(185, 75%, 40%)

HSB

hsb(185, 85%, 70%)

CMYK

cmyk(85%, 7%, 0%, 30%)

Oklch

oklch(66.4% 0.109 205.1)

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

#338099

Slate Blue · SteelBlue · Mint Ice

HEX

#338099

RGB

rgb(51, 128, 153)

HSL

hsl(195, 50%, 40%)

HSB

hsb(195, 67%, 60%)

CMYK

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

Oklch

oklch(56.3% 0.084 222.8)

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

#4D5880

Indigo · DarkSlateBlue · Prussian Blue

HEX

#4D5880

RGB

rgb(77, 88, 128)

HSL

hsl(227, 25%, 40%)

HSB

hsb(227, 40%, 50%)

CMYK

cmyk(40%, 31%, 0%, 50%)

Oklch

oklch(46.8% 0.067 271.9)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#663266

Rose Purple · DarkSlateBlue · Eggplant

HEX

#663266

RGB

rgb(102, 50, 102)

HSL

hsl(300, 34%, 30%)

HSB

hsb(300, 51%, 40%)

CMYK

cmyk(0%, 51%, 0%, 60%)

Oklch

oklch(40.6% 0.104 327.3)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

00CCCC

CC0000

Analogous

00CC66

00CCCC

0066CC

Triadic

00CCCC

CC00CC

CCCC00

Split-Comp.

00CCCC

CC0066

CC6600

Tetradic

00CCCC

6600CC

CC0000

66CC00

Contrast Matrix WCAG 2.1 Contrast

00CCCC	1AA6B3	338099	4D5880	663266
—	1.5 Fail	2.2 Fail	3.5 AA Large	4.7 AA
1.5 Fail	—	1.5 Fail	2.4 Fail	3.2 AA Large
2.2 Fail	1.5 Fail	—	1.6 Fail	2.1 Fail
3.5 AA Large	2.4 Fail	1.6 Fail	—	1.4 Fail
4.7 AA	3.2 AA Large	2.1 Fail	1.4 Fail	—

White BG

2.0Fail

2.9Fail

4.5AA Large

6.9AA

9.5AAA

Black BG

10.5AAA

7.1AAA

4.7AA

3.0AA Large

2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

585ACC

5758B0

545593

525276

4F4F59

Deuteranopia

4D3DCC

4F44AF

504A92

515074

535656

Tritanopia

0ACCCC

21ADAD

378E8D

4E6F6D

634F4D

Achromatopsia

8F8F8F

7E7E7E

6C6C6C

595959

474747

Shades & Tints Shades & Tints

#00CCCC

Dark

Light

#1AA6B3

Dark

Light

#338099

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #00cccc;
  --color-2: #1aa6b3;
  --color-3: #338099;
  --color-4: #4d5880;
  --color-5: #663266;
}

SCSS

$color-1: #00cccc;
$color-2: #1aa6b3;
$color-3: #338099;
$color-4: #4d5880;
$color-5: #663266;

TAILWIND

colors: {
  'brand-1': '#00cccc',
  'brand-2': '#1aa6b3',
  'brand-3': '#338099',
  'brand-4': '#4d5880',
  'brand-5': '#663266',
}

RGB Array

[0, 204, 204], [26, 166, 179], [51, 128, 153], [77, 88, 128], [102, 50, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #00CCCC, #1AA6B3, #338099, #4D5880, #663266 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: #00cccc; --color-2: #1aa6b3; --color-3: #338099; --color-4: #4d5880; --color-5: #663266. 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