← Back to Editor

#CCB492 · #DDC098 · #CABB9A · #CF7E7A · #664F59

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

#CCB492

Ginger · Tan · Warm Sun

HEX
#CCB492
RGB
rgb(204, 180, 146)
HSL
hsl(35, 36%, 69%)
HSB
hsb(35, 28%, 80%)
CMYK
cmyk(0%, 12%, 28%, 20%)
Oklch
oklch(78.2% 0.054 76.4)

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

#DDC098

Goose Yellow · BurlyWood · Warm Sun

HEX
#DDC098
RGB
rgb(221, 192, 152)
HSL
hsl(35, 50%, 73%)
HSB
hsb(35, 31%, 87%)
CMYK
cmyk(0%, 13%, 31%, 13%)
Oklch
oklch(82.3% 0.063 75.6)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#CABB9A

Ginger · Tan · Sunflower

HEX
#CABB9A
RGB
rgb(202, 187, 154)
HSL
hsl(41, 31%, 70%)
HSB
hsb(41, 24%, 79%)
CMYK
cmyk(0%, 7%, 24%, 21%)
Oklch
oklch(79.6% 0.048 86.4)

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

#CF7E7A

Peach Pink · LightCoral · Coral Red

HEX
#CF7E7A
RGB
rgb(207, 126, 122)
HSL
hsl(3, 47%, 65%)
HSB
hsb(3, 41%, 81%)
CMYK
cmyk(0%, 39%, 41%, 19%)
Oklch
oklch(67.8% 0.101 23.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#664F59

Dark Violet · DimGray · Camellia

HEX
#664F59
RGB
rgb(102, 79, 89)
HSL
hsl(334, 13%, 35%)
HSB
hsb(334, 23%, 40%)
CMYK
cmyk(0%, 23%, 13%, 60%)
Oklch
oklch(45.5% 0.034 350.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCB492
93ABCC

Analogous

CC9893
CCB492
C8CC93

Triadic

CCB492
93CCB5
B593CC

Split-Comp.

CCB492
93C8CC
9893CC

Tetradic

CCB492
93CC98
93ABCC
CC93C8

Contrast Matrix WCAG 2.1 Contrast

CCB492
DDC098
CABB9A
CF7E7A
664F59
—
1.1
Fail
1.1
Fail
1.5
Fail
3.7
AA Large
1.1
Fail
—
1.1
Fail
1.7
Fail
4.3
AA Large
1.1
Fail
1.1
Fail
—
1.6
Fail
3.9
AA Large
1.5
Fail
1.7
Fail
1.6
Fail
—
2.4
Fail
3.7
AA Large
4.3
AA Large
3.9
AA Large
2.4
Fail
—
White BG
2.0Fail
1.7Fail
1.9Fail
3.0AA Large
7.4AAA
Black BG
10.5AAA
12.1AAA
11.1AAA
6.9AA
2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C19A
D0D0A2
C4C3A2
ACAB7B
5C5C57

Deuteranopia

C3C59C
D2D4A4
C4C5A4
B1B77B
5D5F56

Tritanopia

CBA1A2
DCA9AB
C9A8AA
CB7C7C
655554

Achromatopsia

B7B7B7
C4C4C4
BCBCBC
969696
575757

Shades & Tints Shades & Tints

#CCB492

Dark
Light

#DDC098

Dark
Light

#CABB9A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccb492;
  --color-2: #ddc098;
  --color-3: #cabb9a;
  --color-4: #cf7e7a;
  --color-5: #664f59;
}

SCSS

$color-1: #ccb492;
$color-2: #ddc098;
$color-3: #cabb9a;
$color-4: #cf7e7a;
$color-5: #664f59;

TAILWIND

colors: {
  'brand-1': '#ccb492',
  'brand-2': '#ddc098',
  'brand-3': '#cabb9a',
  'brand-4': '#cf7e7a',
  'brand-5': '#664f59',
}

RGB Array

[204, 180, 146], [221, 192, 152], [202, 187, 154], [207, 126, 122], [102, 79, 89]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCB492, #DDC098, #CABB9A, #CF7E7A, #664F59 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: #ccb492; --color-2: #ddc098; --color-3: #cabb9a; --color-4: #cf7e7a; --color-5: #664f59. 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 general-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