#B3C4B6 + #75968A + #B0BB79 + #F5CC74 + #F4DA83 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B3C4B6

Celadon · Silver · Apple Green

HEX

#B3C4B6

RGB

rgb(179, 196, 182)

HSL

hsl(131, 13%, 74%)

HSB

hsb(131, 9%, 77%)

CMYK

cmyk(9%, 0%, 7%, 23%)

Oklch

oklch(80.3% 0.027 150.7)

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

#75968A

Mineral Blue · LightSlateGray · Olive Green

HEX

#75968A

RGB

rgb(117, 150, 138)

HSL

hsl(158, 14%, 52%)

HSB

hsb(158, 22%, 59%)

CMYK

cmyk(22%, 0%, 8%, 41%)

Oklch

oklch(64.5% 0.041 170.8)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#B0BB79

Grass Green · Tan · Olive Green

HEX

#B0BB79

RGB

rgb(176, 187, 121)

HSL

hsl(70, 33%, 60%)

HSB

hsb(70, 35%, 73%)

CMYK

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

Oklch

oklch(76.8% 0.089 116.2)

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

#F5CC74

Goose Yellow · Khaki · Sunflower

HEX

#F5CC74

RGB

rgb(245, 204, 116)

HSL

hsl(41, 87%, 71%)

HSB

hsb(41, 53%, 96%)

CMYK

cmyk(0%, 17%, 53%, 4%)

Oklch

oklch(86.3% 0.117 85.0)

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

#F4DA83

Goose Yellow · Khaki · Sunflower

HEX

#F4DA83

RGB

rgb(244, 218, 131)

HSL

hsl(46, 84%, 74%)

HSB

hsb(46, 46%, 96%)

CMYK

cmyk(0%, 11%, 46%, 4%)

Oklch

oklch(89.1% 0.111 93.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3C4B6

C5B4C2

Analogous

BAC5B4

B3C4B6

B4C5C0

Triadic

B3C4B6

B7B4C5

C5B7B4

Split-Comp.

B3C4B6

C0B4C5

C5B4BA

Tetradic

B3C4B6

B4BAC5

C5B4C2

C5C0B4

Contrast Matrix WCAG 2.1 Contrast

B3C4B6	75968A	B0BB79	F5CC74	F4DA83
—	1.8 Fail	1.1 Fail	1.2 Fail	1.3 Fail
1.8 Fail	—	1.6 Fail	2.1 Fail	2.3 Fail
1.1 Fail	1.6 Fail	—	1.3 Fail	1.5 Fail
1.2 Fail	2.1 Fail	1.3 Fail	—	1.1 Fail
1.3 Fail	2.3 Fail	1.5 Fail	1.1 Fail	—

White BG

1.8Fail

3.2AA Large

2.1Fail

1.5Fail

1.4Fail

Black BG

11.5AAA

6.5AA

10.2AAA

13.8AAA

15.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BABBB9

83848D

B5B589

E3E389

E9E998

Deuteranopia

B9B8BA

817F8E

B4B38D

E6E98E

EAEC9D

Tritanopia

B4BCBD

778F90

B19698

F39A9E

F3A9AC

Achromatopsia

BDBDBD

8B8B8B

B0B0B0

CECECE

D8D8D8

Shades & Tints Shades & Tints

#B3C4B6

Dark

Light

#75968A

Dark

Light

#B0BB79

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3c4b6;
  --color-2: #75968a;
  --color-3: #b0bb79;
  --color-4: #f5cc74;
  --color-5: #f4da83;
}

SCSS

$color-1: #b3c4b6;
$color-2: #75968a;
$color-3: #b0bb79;
$color-4: #f5cc74;
$color-5: #f4da83;

TAILWIND

colors: {
  'brand-1': '#b3c4b6',
  'brand-2': '#75968a',
  'brand-3': '#b0bb79',
  'brand-4': '#f5cc74',
  'brand-5': '#f4da83',
}

RGB Array

[179, 196, 182], [117, 150, 138], [176, 187, 121], [245, 204, 116], [244, 218, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #B3C4B6, #75968A, #B0BB79, #F5CC74, #F4DA83 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: #b3c4b6; --color-2: #75968a; --color-3: #b0bb79; --color-4: #f5cc74; --color-5: #f4da83. 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