← Back to Editor

#B1C7B2 · #FFF6D7 · #584A2F · #7C5F41 · #E48060

cool

A 5-color cool palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#B1C7B2

Celadon · Silver · Apple Green

HEX
#B1C7B2
RGB
rgb(177, 199, 178)
HSL
hsl(123, 16%, 74%)
HSB
hsb(123, 11%, 78%)
CMYK
cmyk(11%, 0%, 11%, 22%)
Oklch
oklch(80.7% 0.038 146.5)

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

#FFF6D7

Goose Yellow · Beige · Lemon Cream

HEX
#FFF6D7
RGB
rgb(255, 246, 215)
HSL
hsl(47, 100%, 92%)
HSB
hsb(47, 16%, 100%)
CMYK
cmyk(0%, 4%, 16%, 0%)
Oklch
oklch(97.2% 0.041 93.6)

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

#584A2F

Ochre · DarkOliveGreen · Honey Gold

HEX
#584A2F
RGB
rgb(88, 74, 47)
HSL
hsl(40, 30%, 26%)
HSB
hsb(40, 47%, 35%)
CMYK
cmyk(0%, 16%, 47%, 65%)
Oklch
oklch(41.6% 0.045 83.2)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#7C5F41

Ochre · Sienna · Amber Brown

HEX
#7C5F41
RGB
rgb(124, 95, 65)
HSL
hsl(31, 31%, 37%)
HSB
hsb(31, 48%, 49%)
CMYK
cmyk(0%, 23%, 48%, 51%)
Oklch
oklch(50.7% 0.058 66.9)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#E48060

Apricot · Salmon · Warm Sun

HEX
#E48060
RGB
rgb(228, 128, 96)
HSL
hsl(15, 71%, 64%)
HSB
hsb(15, 58%, 89%)
CMYK
cmyk(0%, 44%, 58%, 11%)
Oklch
oklch(70.3% 0.132 38.5)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1C7B2
C7B2C6

Analogous

BCC7B2
B1C7B2
B2C7BE

Triadic

B1C7B2
B3B2C7
C7B3B2

Split-Comp.

B1C7B2
BEB2C7
C7B2BC

Tetradic

B1C7B2
B2BCC7
C7B2C6
C7BEB2

Contrast Matrix WCAG 2.1 Contrast

B1C7B2
FFF6D7
584A2F
7C5F41
E48060
—
1.7
Fail
4.8
AA
3.3
AA Large
1.5
Fail
1.7
Fail
—
8.0
AAA
5.4
AA
2.6
Fail
4.8
AA
8.0
AAA
—
1.5
Fail
3.1
AA Large
3.3
AA Large
5.4
AA
1.5
Fail
—
2.1
Fail
1.5
Fail
2.6
Fail
3.1
AA Large
2.1
Fail
—
White BG
1.8Fail
1.1Fail
8.6AAA
5.9AA
2.8Fail
Black BG
11.7AAA
19.4AAA
2.4Fail
3.6AA Large
7.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBBB7
FBFBDF
525236
6F6F48
B9B868

Deuteranopia

B9B8B8
FCFCE0
535437
71734A
BFC66A

Tritanopia

B2BBBC
FFE4E6
573B3C
7B4E4F
DF6E6F

Achromatopsia

BEBEBE
F5F5F5
4B4B4B
646464
9A9A9A

Shades & Tints Shades & Tints

#B1C7B2

Dark
Light

#FFF6D7

Dark
Light

#584A2F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1c7b2;
  --color-2: #fff6d7;
  --color-3: #584a2f;
  --color-4: #7c5f41;
  --color-5: #e48060;
}

SCSS

$color-1: #b1c7b2;
$color-2: #fff6d7;
$color-3: #584a2f;
$color-4: #7c5f41;
$color-5: #e48060;

TAILWIND

colors: {
  'brand-1': '#b1c7b2',
  'brand-2': '#fff6d7',
  'brand-3': '#584a2f',
  'brand-4': '#7c5f41',
  'brand-5': '#e48060',
}

RGB Array

[177, 199, 178], [255, 246, 215], [88, 74, 47], [124, 95, 65], [228, 128, 96]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #B1C7B2, #FFF6D7, #584A2F, #7C5F41, #E48060 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #b1c7b2; --color-2: #fff6d7; --color-3: #584a2f; --color-4: #7c5f41; --color-5: #e48060. 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 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