← Back to Editor

#CA2B47 · #AF6246 · #CBBC79 · #D5D49E · #A9BD88

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 Library

Color Details Color Details

#CA2B47

Vermilion · Crimson · Passion Red

HEX
#CA2B47
RGB
rgb(202, 43, 71)
HSL
hsl(349, 65%, 48%)
HSB
hsb(349, 79%, 79%)
CMYK
cmyk(0%, 79%, 65%, 21%)
Oklch
oklch(55.3% 0.193 17.2)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#AF6246

Tangerine · Sienna · Amber Brown

HEX
#AF6246
RGB
rgb(175, 98, 70)
HSL
hsl(16, 43%, 48%)
HSB
hsb(16, 60%, 69%)
CMYK
cmyk(0%, 44%, 60%, 31%)
Oklch
oklch(57.8% 0.108 40.5)

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

#CBBC79

Ginger · Tan · Sunflower

HEX
#CBBC79
RGB
rgb(203, 188, 121)
HSL
hsl(49, 44%, 64%)
HSB
hsb(49, 40%, 80%)
CMYK
cmyk(0%, 7%, 40%, 20%)
Oklch
oklch(79.2% 0.088 97.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#D5D49E

Fresh Green · Tan · Sunflower

HEX
#D5D49E
RGB
rgb(213, 212, 158)
HSL
hsl(59, 40%, 73%)
HSB
hsb(59, 26%, 84%)
CMYK
cmyk(0%, 0%, 26%, 16%)
Oklch
oklch(85.8% 0.071 106.9)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#A9BD88

Willow Green · DarkSeaGreen · Apple Green

HEX
#A9BD88
RGB
rgb(169, 189, 136)
HSL
hsl(83, 29%, 64%)
HSB
hsb(83, 28%, 74%)
CMYK
cmyk(11%, 0%, 28%, 26%)
Oklch
oklch(77.0% 0.076 124.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CA2B47
2BCAAD

Analogous

CA2B98
CA2B47
CA5D2B

Triadic

CA2B47
48CA2B
2B48CA

Split-Comp.

CA2B47
2BCA5D
2B98CA

Tetradic

CA2B47
98CA2B
2BCAAD
5D2BCA

Contrast Matrix WCAG 2.1 Contrast

CA2B47
AF6246
CBBC79
D5D49E
A9BD88
—
1.2
Fail
2.8
Fail
3.5
AA Large
2.6
Fail
1.2
Fail
—
2.4
Fail
2.9
Fail
2.2
Fail
2.8
Fail
2.4
Fail
—
1.2
Fail
1.1
Fail
3.5
AA Large
2.9
Fail
1.2
Fail
—
1.3
Fail
2.6
Fail
2.2
Fail
1.1
Fail
1.3
Fail
—
White BG
5.3AA
4.5AA
1.9Fail
1.5Fail
2.0Fail
Black BG
3.9AA Large
4.7AA
11.0AAA
13.7AAA
10.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

858440
8E8D4D
C5C489
D5D5AB
B2B295

Deuteranopia

8E9A3F
92984E
C5C78D
D5D5AE
B1AF98

Tritanopia

C23B3A
AB5253
CA9699
D5B5B8
AA9FA1

Achromatopsia

5E5E5E
767676
B9B9B9
CECECE
B1B1B1

Shades & Tints Shades & Tints

#CA2B47

Dark
Light

#AF6246

Dark
Light

#CBBC79

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ca2b47;
  --color-2: #af6246;
  --color-3: #cbbc79;
  --color-4: #d5d49e;
  --color-5: #a9bd88;
}

SCSS

$color-1: #ca2b47;
$color-2: #af6246;
$color-3: #cbbc79;
$color-4: #d5d49e;
$color-5: #a9bd88;

TAILWIND

colors: {
  'brand-1': '#ca2b47',
  'brand-2': '#af6246',
  'brand-3': '#cbbc79',
  'brand-4': '#d5d49e',
  'brand-5': '#a9bd88',
}

RGB Array

[202, 43, 71], [175, 98, 70], [203, 188, 121], [213, 212, 158], [169, 189, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #CA2B47, #AF6246, #CBBC79, #D5D49E, #A9BD88 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: #ca2b47; --color-2: #af6246; --color-3: #cbbc79; --color-4: #d5d49e; --color-5: #a9bd88. 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 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