← Back to Editor

#B1C7B8 · #A6AB7A · #AE4918 · #32161E · #C29F42

warm

A 5-color warm 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

#B1C7B8

Celadon · Silver · Apple Green

HEX
#B1C7B8
RGB
rgb(177, 199, 184)
HSL
hsl(139, 16%, 74%)
HSB
hsb(139, 11%, 78%)
CMYK
cmyk(11%, 0%, 8%, 22%)
Oklch
oklch(80.9% 0.032 155.8)

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

#A6AB7A

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A6AB7A
RGB
rgb(166, 171, 122)
HSL
hsl(66, 23%, 57%)
HSB
hsb(66, 29%, 67%)
CMYK
cmyk(3%, 0%, 29%, 33%)
Oklch
oklch(72.5% 0.067 112.8)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#AE4918

Tangerine · Sienna · Amber Brown

HEX
#AE4918
RGB
rgb(174, 73, 24)
HSL
hsl(20, 76%, 39%)
HSB
hsb(20, 86%, 68%)
CMYK
cmyk(0%, 58%, 86%, 32%)
Oklch
oklch(53.2% 0.145 42.7)

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

#32161E

Dark Violet · Black · Raspberry

HEX
#32161E
RGB
rgb(50, 22, 30)
HSL
hsl(343, 39%, 14%)
HSB
hsb(343, 56%, 20%)
CMYK
cmyk(0%, 56%, 40%, 80%)
Oklch
oklch(24.4% 0.046 2.9)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#C29F42

Ginger · GoldenRod · Sunflower

HEX
#C29F42
RGB
rgb(194, 159, 66)
HSL
hsl(44, 51%, 51%)
HSB
hsb(44, 66%, 76%)
CMYK
cmyk(0%, 18%, 66%, 24%)
Oklch
oklch(71.7% 0.118 88.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1C7B8
C7B2C1

Analogous

B6C7B2
B1C7B8
B2C7C3

Triadic

B1C7B8
B9B2C7
C7B9B2

Split-Comp.

B1C7B8
C3B2C7
C7B2B6

Tetradic

B1C7B8
B2B6C7
C7B2C1
C7C3B2

Contrast Matrix WCAG 2.1 Contrast

B1C7B8
A6AB7A
AE4918
32161E
C29F42
—
1.3
Fail
3.1
AA Large
9.2
AAA
1.4
Fail
1.3
Fail
—
2.3
Fail
6.9
AA
1.0
Fail
3.1
AA Large
2.3
Fail
—
3.0
Fail
2.2
Fail
9.2
AAA
6.9
AA
3.0
Fail
—
6.6
AA
1.4
Fail
1.0
Fail
2.2
Fail
6.6
AA
—
White BG
1.8Fail
2.4Fail
5.6AA
16.5AAA
2.5Fail
Black BG
11.7AAA
8.7AAA
3.8AA Large
1.3Fail
8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBBBC
A8A886
828124
26261C
B3B359

Deuteranopia

B9B8BC
A8A889
889027
282A1C
B5B75E

Tritanopia

B2BEBF
A68F91
A92D2F
311B1A
C06A6E

Achromatopsia

BFBFBF
A4A4A4
626262
1F1F1F
9F9F9F

Shades & Tints Shades & Tints

#B1C7B8

Dark
Light

#A6AB7A

Dark
Light

#AE4918

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1c7b8;
  --color-2: #a6ab7a;
  --color-3: #ae4918;
  --color-4: #32161e;
  --color-5: #c29f42;
}

SCSS

$color-1: #b1c7b8;
$color-2: #a6ab7a;
$color-3: #ae4918;
$color-4: #32161e;
$color-5: #c29f42;

TAILWIND

colors: {
  'brand-1': '#b1c7b8',
  'brand-2': '#a6ab7a',
  'brand-3': '#ae4918',
  'brand-4': '#32161e',
  'brand-5': '#c29f42',
}

RGB Array

[177, 199, 184], [166, 171, 122], [174, 73, 24], [50, 22, 30], [194, 159, 66]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #B1C7B8, #A6AB7A, #AE4918, #32161E, #C29F42 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: #b1c7b8; --color-2: #a6ab7a; --color-3: #ae4918; --color-4: #32161e; --color-5: #c29f42. 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 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