#33CCFF + #40BFCC + #4DB399 + #59A666 + #669933 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#33CCFF

Lake Blue · DeepSkyBlue · Lake Green

HEX

#33CCFF

RGB

rgb(51, 204, 255)

HSL

hsl(195, 100%, 60%)

HSB

hsb(195, 80%, 100%)

CMYK

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

Oklch

oklch(79.0% 0.140 226.2)

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

#40BFCC

Lake Blue · MediumTurquoise · Lake Green

HEX

#40BFCC

RGB

rgb(64, 191, 204)

HSL

hsl(186, 58%, 53%)

HSB

hsb(186, 69%, 80%)

CMYK

cmyk(69%, 6%, 0%, 20%)

Oklch

oklch(74.2% 0.110 204.9)

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

#4DB399

Mineral Blue · CadetBlue · Mint Ice

HEX

#4DB399

RGB

rgb(77, 179, 153)

HSL

hsl(165, 40%, 50%)

HSB

hsb(165, 57%, 70%)

CMYK

cmyk(57%, 0%, 15%, 30%)

Oklch

oklch(69.9% 0.103 173.8)

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

#59A666

Celadon · MediumSeaGreen · Olive Green

HEX

#59A666

RGB

rgb(89, 166, 102)

HSL

hsl(130, 30%, 50%)

HSB

hsb(130, 46%, 65%)

CMYK

cmyk(46%, 0%, 39%, 35%)

Oklch

oklch(65.9% 0.122 147.9)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#669933

Celadon · DarkOliveGreen · Forest Green

HEX

#669933

RGB

rgb(102, 153, 51)

HSL

hsl(90, 50%, 40%)

HSB

hsb(90, 67%, 60%)

CMYK

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

Oklch

oklch(62.5% 0.143 132.0)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

33CCFF

FF6633

Analogous

33FFCC

33CCFF

3366FF

Triadic

33CCFF

FF33CC

CCFF33

Split-Comp.

33CCFF

FF3366

FFCC33

Tetradic

33CCFF

CC33FF

FF6633

66FF33

Contrast Matrix WCAG 2.1 Contrast

33CCFF	40BFCC	4DB399	59A666	669933
—	1.2 Fail	1.4 Fail	1.6 Fail	1.8 Fail
1.2 Fail	—	1.2 Fail	1.3 Fail	1.5 Fail
1.4 Fail	1.2 Fail	—	1.2 Fail	1.3 Fail
1.6 Fail	1.3 Fail	1.2 Fail	—	1.1 Fail
1.8 Fail	1.5 Fail	1.3 Fail	1.1 Fail	—

White BG

1.9Fail

2.2Fail

2.6Fail

3.0Fail

3.4AA Large

Black BG

11.2AAA

9.5AAA

8.2AAA

7.1AAA

6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7577F3

7778C9

797A9F

7A7B75

7C7D4C

Deuteranopia

6C61F0

7066C8

736CA1

767079

797552

Tritanopia

3BE9E7

46C6C6

52A4A5

5D8284

695F63

Achromatopsia

A4A4A4

9B9B9B

929292

888888

7E7E7E

Shades & Tints Shades & Tints

#33CCFF

Dark

Light

#40BFCC

Dark

Light

#4DB399

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #33ccff;
  --color-2: #40bfcc;
  --color-3: #4db399;
  --color-4: #59a666;
  --color-5: #669933;
}

SCSS

$color-1: #33ccff;
$color-2: #40bfcc;
$color-3: #4db399;
$color-4: #59a666;
$color-5: #669933;

TAILWIND

colors: {
  'brand-1': '#33ccff',
  'brand-2': '#40bfcc',
  'brand-3': '#4db399',
  'brand-4': '#59a666',
  'brand-5': '#669933',
}

RGB Array

[51, 204, 255], [64, 191, 204], [77, 179, 153], [89, 166, 102], [102, 153, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #33CCFF, #40BFCC, #4DB399, #59A666, #669933 is ideal for: corporate websites, product showcases, portfolios. 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: #33ccff; --color-2: #40bfcc; --color-3: #4db399; --color-4: #59a666; --color-5: #669933. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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