#B1C8A9 + #88AC7B + #5D9FA5 + #308E97 + #8B8A43 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B1C8A9

Celadon · Silver · Apple Green

HEX

#B1C8A9

RGB

rgb(177, 200, 169)

HSL

hsl(105, 22%, 72%)

HSB

hsb(105, 16%, 78%)

CMYK

cmyk(12%, 0%, 16%, 22%)

Oklch

oklch(80.7% 0.050 137.6)

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

#88AC7B

Celadon · DarkSeaGreen · Olive Green

HEX

#88AC7B

RGB

rgb(136, 172, 123)

HSL

hsl(104, 23%, 58%)

HSB

hsb(104, 28%, 67%)

CMYK

cmyk(21%, 0%, 28%, 33%)

Oklch

oklch(70.5% 0.080 137.5)

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

#5D9FA5

Slate Blue · CadetBlue · Lake Green

HEX

#5D9FA5

RGB

rgb(93, 159, 165)

HSL

hsl(185, 29%, 51%)

HSB

hsb(185, 44%, 65%)

CMYK

cmyk(44%, 4%, 0%, 35%)

Oklch

oklch(66.1% 0.068 203.2)

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

#308E97

Lake Blue · SteelBlue · Mint Ice

HEX

#308E97

RGB

rgb(48, 142, 151)

HSL

hsl(185, 52%, 39%)

HSB

hsb(185, 68%, 59%)

CMYK

cmyk(68%, 6%, 0%, 41%)

Oklch

oklch(59.6% 0.087 204.2)

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

#8B8A43

Autumn Sage · DimGray · Honey Gold

HEX

#8B8A43

RGB

rgb(139, 138, 67)

HSL

hsl(59, 35%, 40%)

HSB

hsb(59, 52%, 55%)

CMYK

cmyk(0%, 1%, 52%, 45%)

Oklch

oklch(61.9% 0.094 108.1)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1C8A9

BFA8C7

Analogous

BFC7A8

B1C8A9

A8C7B0

Triadic

B1C8A9

A8B0C7

C7A8B0

Split-Comp.

B1C8A9

B0A8C7

C7A8BF

Tetradic

B1C8A9

A8BFC7

BFA8C7

C7B0A8

Contrast Matrix WCAG 2.1 Contrast

B1C8A9	88AC7B	5D9FA5	308E97	8B8A43
—	1.4 Fail	1.7 Fail	2.2 Fail	2.0 Fail
1.4 Fail	—	1.2 Fail	1.5 Fail	1.4 Fail
1.7 Fail	1.2 Fail	—	1.3 Fail	1.2 Fail
2.2 Fail	1.5 Fail	1.3 Fail	—	1.1 Fail
2.0 Fail	1.4 Fail	1.2 Fail	1.1 Fail	—

White BG

1.8Fail

2.6Fail

3.0AA Large

3.9AA Large

3.6AA Large

Black BG

11.7AAA

8.2AAA

7.0AA

5.4AA

5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBBB1

989887

7A7AA4

595A95

8B8B54

Deuteranopia

BAB8B2

96938A

7671A3

534C94

8B8B58

Tritanopia

B2B6B8

8A9092

60A2A2

359393

8B6265

Achromatopsia

BEBEBE

9C9C9C

8C8C8C

737373

828282

Shades & Tints Shades & Tints

#B1C8A9

Dark

Light

#88AC7B

Dark

Light

#5D9FA5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1c8a9;
  --color-2: #88ac7b;
  --color-3: #5d9fa5;
  --color-4: #308e97;
  --color-5: #8b8a43;
}

SCSS

$color-1: #b1c8a9;
$color-2: #88ac7b;
$color-3: #5d9fa5;
$color-4: #308e97;
$color-5: #8b8a43;

TAILWIND

colors: {
  'brand-1': '#b1c8a9',
  'brand-2': '#88ac7b',
  'brand-3': '#5d9fa5',
  'brand-4': '#308e97',
  'brand-5': '#8b8a43',
}

RGB Array

[177, 200, 169], [136, 172, 123], [93, 159, 165], [48, 142, 151], [139, 138, 67]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #B1C8A9, #88AC7B, #5D9FA5, #308E97, #8B8A43 is ideal for: corporate websites, product showcases, portfolios. 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: #b1c8a9; --color-2: #88ac7b; --color-3: #5d9fa5; --color-4: #308e97; --color-5: #8b8a43. 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. 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 warm-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