← Back to Editor

#003340 · #2F7F91 · #7ADEBD · #CFFFCC · #F4FFF2

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#003340

Lake Blue · DarkSlateGray · Peacock Green

HEX
#003340
RGB
rgb(0, 51, 64)
HSL
hsl(192, 100%, 13%)
HSB
hsb(192, 100%, 25%)
CMYK
cmyk(100%, 20%, 0%, 75%)
Oklch
oklch(29.7% 0.054 220.6)

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

#2F7F91

Lake Blue · SteelBlue · Mint Ice

HEX
#2F7F91
RGB
rgb(47, 127, 145)
HSL
hsl(191, 51%, 38%)
HSB
hsb(191, 68%, 57%)
CMYK
cmyk(68%, 12%, 0%, 43%)
Oklch
oklch(55.6% 0.081 215.4)

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

#7ADEBD

Jade · MediumAquaMarine · Lake Green

HEX
#7ADEBD
RGB
rgb(122, 222, 189)
HSL
hsl(160, 60%, 67%)
HSB
hsb(160, 45%, 87%)
CMYK
cmyk(45%, 0%, 15%, 13%)
Oklch
oklch(83.0% 0.106 170.1)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#CFFFCC

Emerald · Beige · Mint Green

HEX
#CFFFCC
RGB
rgb(207, 255, 204)
HSL
hsl(116, 100%, 90%)
HSB
hsb(116, 20%, 100%)
CMYK
cmyk(19%, 0%, 20%, 0%)
Oklch
oklch(95.4% 0.084 143.4)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#F4FFF2

Emerald · Snow · Mint Green

HEX
#F4FFF2
RGB
rgb(244, 255, 242)
HSL
hsl(111, 100%, 97%)
HSB
hsb(111, 5%, 100%)
CMYK
cmyk(4%, 0%, 5%, 0%)
Oklch
oklch(98.8% 0.021 140.9)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

003340
420D00

Analogous

00422E
003340
001442

Triadic

003340
420035
354200

Split-Comp.

003340
420014
422E00

Tetradic

003340
2E0042
420D00
144200

Contrast Matrix WCAG 2.1 Contrast

003340
2F7F91
7ADEBD
CFFFCC
F4FFF2
—
3.0
Fail
8.4
AAA
12.2
AAA
13.2
AAA
3.0
Fail
—
2.8
Fail
4.1
AA Large
4.5
AA Large
8.4
AAA
2.8
Fail
—
1.4
Fail
1.6
Fail
12.2
AAA
4.1
AA Large
1.4
Fail
—
1.1
Fail
13.2
AAA
4.5
AA Large
1.6
Fail
1.1
Fail
—
White BG
13.6AAA
4.6AA
1.6Fail
1.1Fail
1.0Fail
Black BG
1.5Fail
4.6AA
13.0AAA
18.8AAA
20.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

16173D
52528D
A5A6C5
E4E4D8
F9F9F5

Deuteranopia

130F3C
4D478C
A098C7
E1DDDB
F8F7F6

Tritanopia

033A3A
338988
7FCBCD
D1E2E4
F5F8F8

Achromatopsia

252525
696969
BCBCBC
EBEBEB
FAFAFA

Shades & Tints Shades & Tints

#003340

Dark
Light

#2F7F91

Dark
Light

#7ADEBD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #003340;
  --color-2: #2f7f91;
  --color-3: #7adebd;
  --color-4: #cfffcc;
  --color-5: #f4fff2;
}

SCSS

$color-1: #003340;
$color-2: #2f7f91;
$color-3: #7adebd;
$color-4: #cfffcc;
$color-5: #f4fff2;

TAILWIND

colors: {
  'brand-1': '#003340',
  'brand-2': '#2f7f91',
  'brand-3': '#7adebd',
  'brand-4': '#cfffcc',
  'brand-5': '#f4fff2',
}

RGB Array

[0, 51, 64], [47, 127, 145], [122, 222, 189], [207, 255, 204], [244, 255, 242]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #003340, #2F7F91, #7ADEBD, #CFFFCC, #F4FFF2 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #003340; --color-2: #2f7f91; --color-3: #7adebd; --color-4: #cfffcc; --color-5: #f4fff2. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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