← Back to Editor

#CBA193 · #F1AA8C · #745871 · #7B3B5D · #D52651

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

#CBA193

Apricot · Tan · Warm Sun

HEX
#CBA193
RGB
rgb(203, 161, 147)
HSL
hsl(15, 35%, 69%)
HSB
hsb(15, 28%, 80%)
CMYK
cmyk(0%, 21%, 28%, 20%)
Oklch
oklch(74.4% 0.054 39.2)

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

#F1AA8C

Apricot · BurlyWood · Warm Sun

HEX
#F1AA8C
RGB
rgb(241, 170, 140)
HSL
hsl(18, 78%, 75%)
HSB
hsb(18, 42%, 95%)
CMYK
cmyk(0%, 29%, 42%, 5%)
Oklch
oklch(79.9% 0.094 43.8)

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

#745871

Rose Purple · DimGray · Eggplant

HEX
#745871
RGB
rgb(116, 88, 113)
HSL
hsl(306, 14%, 40%)
HSB
hsb(306, 24%, 45%)
CMYK
cmyk(0%, 24%, 3%, 55%)
Oklch
oklch(49.8% 0.052 329.9)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#7B3B5D

Rose Purple · DimGray · Camellia

HEX
#7B3B5D
RGB
rgb(123, 59, 93)
HSL
hsl(328, 35%, 36%)
HSB
hsb(328, 52%, 48%)
CMYK
cmyk(0%, 52%, 24%, 52%)
Oklch
oklch(44.6% 0.099 348.7)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#D52651

Vermilion · Crimson · Passion Red

HEX
#D52651
RGB
rgb(213, 38, 81)
HSL
hsl(345, 70%, 49%)
HSB
hsb(345, 82%, 84%)
CMYK
cmyk(0%, 82%, 62%, 16%)
Oklch
oklch(57.1% 0.207 14.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CBA193
94BECC

Analogous

CC94A2
CBA193
CCBE94

Triadic

CBA193
94CCA2
A294CC

Split-Comp.

CBA193
94CCBE
94A2CC

Tetradic

CBA193
A2CC94
94BECC
BE94CC

Contrast Matrix WCAG 2.1 Contrast

CBA193
F1AA8C
745871
7B3B5D
D52651
—
1.2
Fail
2.7
Fail
3.4
AA Large
2.1
Fail
1.2
Fail
—
3.2
AA Large
4.1
AA Large
2.6
Fail
2.7
Fail
3.2
AA Large
—
1.3
Fail
1.3
Fail
3.4
AA Large
4.1
AA Large
1.3
Fail
—
1.6
Fail
2.1
Fail
2.6
Fail
1.3
Fail
1.6
Fail
—
White BG
2.3Fail
1.9Fail
6.2AA
8.0AAA
5.0AA
Black BG
9.1AAA
10.9AAA
3.4AA Large
2.6Fail
4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9B896
D2D293
68686B
5F5F55
898847

Deuteranopia

BBBE97
D6DC95
6A6C6A
636853
93A144

Tritanopia

C9999A
ED999A
736665
784E4D
CC3E3D

Achromatopsia

ACACAC
BCBCBC
636363
525252
5F5F5F

Shades & Tints Shades & Tints

#CBA193

Dark
Light

#F1AA8C

Dark
Light

#745871

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cba193;
  --color-2: #f1aa8c;
  --color-3: #745871;
  --color-4: #7b3b5d;
  --color-5: #d52651;
}

SCSS

$color-1: #cba193;
$color-2: #f1aa8c;
$color-3: #745871;
$color-4: #7b3b5d;
$color-5: #d52651;

TAILWIND

colors: {
  'brand-1': '#cba193',
  'brand-2': '#f1aa8c',
  'brand-3': '#745871',
  'brand-4': '#7b3b5d',
  'brand-5': '#d52651',
}

RGB Array

[203, 161, 147], [241, 170, 140], [116, 88, 113], [123, 59, 93], [213, 38, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CBA193, #F1AA8C, #745871, #7B3B5D, #D52651 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: #cba193; --color-2: #f1aa8c; --color-3: #745871; --color-4: #7b3b5d; --color-5: #d52651. 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