#30A2B3 + #5FB2B5 + #8FC3B7 + #BED3B9 + #EDE3BB · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#30A2B3

Lake Blue · LightSeaGreen · Mint Ice

HEX

#30A2B3

RGB

rgb(48, 162, 179)

HSL

hsl(188, 58%, 45%)

HSB

hsb(188, 73%, 70%)

CMYK

cmyk(73%, 9%, 0%, 30%)

Oklch

oklch(65.7% 0.101 209.6)

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

#5FB2B5

Slate Blue · CadetBlue · Lake Green

HEX

#5FB2B5

RGB

rgb(95, 178, 181)

HSL

hsl(182, 37%, 54%)

HSB

hsb(182, 48%, 71%)

CMYK

cmyk(48%, 2%, 0%, 29%)

Oklch

oklch(71.3% 0.081 198.6)

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

#8FC3B7

Jade · DarkGray · Lake Green

HEX

#8FC3B7

RGB

rgb(143, 195, 183)

HSL

hsl(166, 30%, 66%)

HSB

hsb(166, 27%, 76%)

CMYK

cmyk(27%, 0%, 6%, 24%)

Oklch

oklch(77.7% 0.057 178.9)

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

#BED3B9

Celadon · Silver · Apple Green

HEX

#BED3B9

RGB

rgb(190, 211, 185)

HSL

hsl(108, 23%, 78%)

HSB

hsb(108, 12%, 83%)

CMYK

cmyk(10%, 0%, 12%, 17%)

Oklch

oklch(84.4% 0.042 139.7)

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

#EDE3BB

Goose Yellow · Wheat · Lemon Cream

HEX

#EDE3BB

RGB

rgb(237, 227, 187)

HSL

hsl(48, 58%, 83%)

HSB

hsb(48, 21%, 93%)

CMYK

cmyk(0%, 4%, 21%, 7%)

Oklch

oklch(91.4% 0.053 95.6)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

30A2B3

B54230

Analogous

30B584

30A2B3

3061B5

Triadic

30A2B3

B530A4

A4B530

Split-Comp.

30A2B3

B53061

B58430

Tetradic

30A2B3

8430B5

B54230

61B530

Contrast Matrix WCAG 2.1 Contrast

30A2B3	5FB2B5	8FC3B7	BED3B9	EDE3BB
—	1.2 Fail	1.5 Fail	1.9 Fail	2.3 Fail
1.2 Fail	—	1.3 Fail	1.5 Fail	1.9 Fail
1.5 Fail	1.3 Fail	—	1.2 Fail	1.5 Fail
1.9 Fail	1.5 Fail	1.2 Fail	—	1.2 Fail
2.3 Fail	1.9 Fail	1.5 Fail	1.2 Fail	—

White BG

3.0AA Large

2.5Fail

2.0Fail

1.6Fail

1.3Fail

Black BG

6.9AA

8.5AAA

10.7AAA

13.2AAA

16.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6162AF

8384B4

A6A6BA

C7C7BF

E9E9C5

Deuteranopia

5B52AE

7E78B4

A39FBB

C6C4C1

E9EAC7

Tritanopia

36ACAB

63B4B4

92BCBD

BFC4C5

ECCCCE

Achromatopsia

828282

9A9A9A

B2B2B2

CACACA

E1E1E1

Shades & Tints Shades & Tints

#30A2B3

Dark

Light

#5FB2B5

Dark

Light

#8FC3B7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #30a2b3;
  --color-2: #5fb2b5;
  --color-3: #8fc3b7;
  --color-4: #bed3b9;
  --color-5: #ede3bb;
}

SCSS

$color-1: #30a2b3;
$color-2: #5fb2b5;
$color-3: #8fc3b7;
$color-4: #bed3b9;
$color-5: #ede3bb;

TAILWIND

colors: {
  'brand-1': '#30a2b3',
  'brand-2': '#5fb2b5',
  'brand-3': '#8fc3b7',
  'brand-4': '#bed3b9',
  'brand-5': '#ede3bb',
}

RGB Array

[48, 162, 179], [95, 178, 181], [143, 195, 183], [190, 211, 185], [237, 227, 187]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #30A2B3, #5FB2B5, #8FC3B7, #BED3B9, #EDE3BB 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: #30a2b3; --color-2: #5fb2b5; --color-3: #8fc3b7; --color-4: #bed3b9; --color-5: #ede3bb. 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 cool-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