#CFD699 + #B0DA98 + #98DABD + #98CDDA + #7E94C4 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CFD699

Fresh Green · Tan · Sunflower

HEX

#CFD699

RGB

rgb(207, 214, 153)

HSL

hsl(67, 43%, 72%)

HSB

hsb(67, 29%, 84%)

CMYK

cmyk(3%, 0%, 29%, 16%)

Oklch

oklch(85.6% 0.080 113.4)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#B0DA98

Celadon · LightGreen · Apple Green

HEX

#B0DA98

RGB

rgb(176, 218, 152)

HSL

hsl(98, 47%, 73%)

HSB

hsb(98, 30%, 85%)

CMYK

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

Oklch

oklch(84.2% 0.099 134.5)

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

#98DABD

Jade · LightBlue · Apple Green

HEX

#98DABD

RGB

rgb(152, 218, 189)

HSL

hsl(154, 47%, 73%)

HSB

hsb(154, 30%, 85%)

CMYK

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

Oklch

oklch(83.6% 0.078 165.4)

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

#98CDDA

Sky Blue · SkyBlue · Lake Green

HEX

#98CDDA

RGB

rgb(152, 205, 218)

HSL

hsl(192, 47%, 73%)

HSB

hsb(192, 30%, 85%)

CMYK

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

Oklch

oklch(81.6% 0.058 214.5)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#7E94C4

Azure · LightSlateGray · Cobalt Blue

HEX

#7E94C4

RGB

rgb(126, 148, 196)

HSL

hsl(221, 37%, 63%)

HSB

hsb(221, 36%, 77%)

CMYK

cmyk(36%, 24%, 0%, 23%)

Oklch

oklch(66.8% 0.076 265.3)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFD699

A099D6

Analogous

D6BF99

CFD699

B0D699

Triadic

CFD699

99CFD6

D699CF

Split-Comp.

CFD699

99B0D6

BF99D6

Tetradic

CFD699

99D6BF

A099D6

D699B0

Contrast Matrix WCAG 2.1 Contrast

CFD699	B0DA98	98DABD	98CDDA	7E94C4
—	1.0 Fail	1.0 Fail	1.1 Fail	2.0 Fail
1.0 Fail	—	1.0 Fail	1.1 Fail	1.9 Fail
1.0 Fail	1.0 Fail	—	1.1 Fail	1.9 Fail
1.1 Fail	1.1 Fail	1.1 Fail	—	1.7 Fail
2.0 Fail	1.9 Fail	1.9 Fail	1.7 Fail	—

White BG

1.5Fail

1.6Fail

1.7Fail

3.0AA Large

Black BG

13.7AAA

13.3AAA

13.1AAA

12.1AAA

6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D2D2A8

C2C3A8

B5B5C4

AFAFD7

8888B8

Deuteranopia

D2D1AB

C0BDAC

B1ACC6

ACA8D6

8685B6

Tritanopia

CFB3B6

B2B5B7

9BCACB

9BD4D4

7FAFAD

Achromatopsia

CDCDCD

C6C6C6

C3C3C3

BFBFBF

939393

Shades & Tints Shades & Tints

#CFD699

Dark

Light

#B0DA98

Dark

Light

#98DABD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfd699;
  --color-2: #b0da98;
  --color-3: #98dabd;
  --color-4: #98cdda;
  --color-5: #7e94c4;
}

SCSS

$color-1: #cfd699;
$color-2: #b0da98;
$color-3: #98dabd;
$color-4: #98cdda;
$color-5: #7e94c4;

TAILWIND

colors: {
  'brand-1': '#cfd699',
  'brand-2': '#b0da98',
  'brand-3': '#98dabd',
  'brand-4': '#98cdda',
  'brand-5': '#7e94c4',
}

RGB Array

[207, 214, 153], [176, 218, 152], [152, 218, 189], [152, 205, 218], [126, 148, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #CFD699, #B0DA98, #98DABD, #98CDDA, #7E94C4 is ideal for: health products, baby brands, fresh-style blogs. 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: #cfd699; --color-2: #b0da98; --color-3: #98dabd; --color-4: #98cdda; --color-5: #7e94c4. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 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