← Back to Editor

#CFD8A3 · #829F6F · #2C7C73 · #00489D · #023A73

sea

A 5-color sea 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

#CFD8A3

Willow Green · Silver · Apple Green

HEX
#CFD8A3
RGB
rgb(207, 216, 163)
HSL
hsl(70, 40%, 74%)
HSB
hsb(70, 25%, 85%)
CMYK
cmyk(4%, 0%, 25%, 15%)
Oklch
oklch(86.2% 0.071 115.7)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#829F6F

Celadon · Gray · Olive Green

HEX
#829F6F
RGB
rgb(130, 159, 111)
HSL
hsl(96, 20%, 53%)
HSB
hsb(96, 30%, 62%)
CMYK
cmyk(18%, 0%, 30%, 38%)
Oklch
oklch(66.8% 0.076 133.4)

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

#2C7C73

Mineral Blue · SeaGreen · Mint Ice

HEX
#2C7C73
RGB
rgb(44, 124, 115)
HSL
hsl(173, 48%, 33%)
HSB
hsb(173, 65%, 49%)
CMYK
cmyk(65%, 0%, 7%, 51%)
Oklch
oklch(53.5% 0.078 184.8)

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

#00489D

Indigo · Teal · Prussian Blue

HEX
#00489D
RGB
rgb(0, 72, 157)
HSL
hsl(212, 100%, 31%)
HSB
hsb(212, 100%, 62%)
CMYK
cmyk(100%, 54%, 0%, 38%)
Oklch
oklch(41.9% 0.152 257.6)

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

#023A73

Indigo · MidnightBlue · Prussian Blue

HEX
#023A73
RGB
rgb(2, 58, 115)
HSL
hsl(210, 97%, 23%)
HSB
hsb(210, 98%, 45%)
CMYK
cmyk(98%, 50%, 0%, 55%)
Oklch
oklch(35.2% 0.112 254.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFD8A3
ABA2D7

Analogous

D7C6A2
CFD8A3
B4D7A2

Triadic

CFD8A3
A2CED7
D7A2CE

Split-Comp.

CFD8A3
A2B4D7
C6A2D7

Tetradic

CFD8A3
A2D7C6
ABA2D7
D7A2B4

Contrast Matrix WCAG 2.1 Contrast

CFD8A3
829F6F
2C7C73
00489D
023A73
—
2.0
Fail
3.3
AA Large
5.8
AA
7.5
AAA
2.0
Fail
—
1.7
Fail
3.0
Fail
3.8
AA Large
3.3
AA Large
1.7
Fail
—
1.8
Fail
2.3
Fail
5.8
AA
3.0
Fail
1.8
Fail
—
1.3
Fail
7.5
AAA
3.8
AA Large
2.3
Fail
1.3
Fail
—
White BG
1.5Fail
2.9Fail
5.0AA
8.7AAA
11.3AAA
Black BG
14.0AAA
7.1AAA
4.2AA Large
2.4Fail
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D3D3B0
8F8F7B
4F4F75
1F2088
1A1B65

Deuteranopia

D2D2B3
8D8B7D
4A4476
1B1684
171362

Tritanopia

CFBABC
838486
307777
047875
055A58

Achromatopsia

CFCFCF
919191
636363
3C3C3C
303030

Shades & Tints Shades & Tints

#CFD8A3

Dark
Light

#829F6F

Dark
Light

#2C7C73

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfd8a3;
  --color-2: #829f6f;
  --color-3: #2c7c73;
  --color-4: #00489d;
  --color-5: #023a73;
}

SCSS

$color-1: #cfd8a3;
$color-2: #829f6f;
$color-3: #2c7c73;
$color-4: #00489d;
$color-5: #023a73;

TAILWIND

colors: {
  'brand-1': '#cfd8a3',
  'brand-2': '#829f6f',
  'brand-3': '#2c7c73',
  'brand-4': '#00489d',
  'brand-5': '#023a73',
}

RGB Array

[207, 216, 163], [130, 159, 111], [44, 124, 115], [0, 72, 157], [2, 58, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #CFD8A3, #829F6F, #2C7C73, #00489D, #023A73 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: #cfd8a3; --color-2: #829f6f; --color-3: #2c7c73; --color-4: #00489d; --color-5: #023a73. 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 sea-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