#CA3730 + #AB7B8A + #A59BB0 + #AAC013 + #AFDBA0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CA3730

Vermilion · FireBrick · Passion Red

HEX

#CA3730

RGB

rgb(202, 55, 48)

HSL

hsl(3, 62%, 49%)

HSB

hsb(3, 76%, 79%)

CMYK

cmyk(0%, 73%, 76%, 21%)

Oklch

oklch(55.9% 0.185 27.6)

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

#AB7B8A

Dark Violet · Gray · Rose Pink

HEX

#AB7B8A

RGB

rgb(171, 123, 138)

HSL

hsl(341, 22%, 58%)

HSB

hsb(341, 28%, 67%)

CMYK

cmyk(0%, 28%, 19%, 33%)

Oklch

oklch(63.5% 0.063 358.6)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#A59BB0

Wisteria · DarkGray · Lilac Purple

HEX

#A59BB0

RGB

rgb(165, 155, 176)

HSL

hsl(269, 12%, 65%)

HSB

hsb(269, 12%, 69%)

CMYK

cmyk(6%, 12%, 0%, 31%)

Oklch

oklch(70.5% 0.032 307.0)

Traditional「Wisteria」· Paint「Lilac Purple」· Creative Lavender Dream

#AAC013

Autumn Sage · GoldenRod · Honey Gold

HEX

#AAC013

RGB

rgb(170, 192, 19)

HSL

hsl(68, 82%, 41%)

HSB

hsb(68, 90%, 75%)

CMYK

cmyk(11%, 0%, 90%, 25%)

Oklch

oklch(76.5% 0.174 117.8)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#AFDBA0

Celadon · LightGreen · Apple Green

HEX

#AFDBA0

RGB

rgb(175, 219, 160)

HSL

hsl(105, 45%, 74%)

HSB

hsb(105, 27%, 86%)

CMYK

cmyk(20%, 0%, 27%, 14%)

Oklch

oklch(84.5% 0.092 137.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CA3730

2FC3CA

Analogous

CA2F75

CA3730

CA852F

Triadic

CA3730

2FCA37

372FCA

Split-Comp.

CA3730

2FCA85

2F75CA

Tetradic

CA3730

75CA2F

2FC3CA

852FCA

Contrast Matrix WCAG 2.1 Contrast

CA3730	AB7B8A	A59BB0	AAC013	AFDBA0
—	1.4 Fail	1.9 Fail	2.5 Fail	3.3 AA Large
1.4 Fail	—	1.3 Fail	1.7 Fail	2.3 Fail
1.9 Fail	1.3 Fail	—	1.3 Fail	1.7 Fail
2.5 Fail	1.7 Fail	1.3 Fail	—	1.3 Fail
3.3 AA Large	2.3 Fail	1.7 Fail	1.3 Fail	—

White BG

5.1AA

3.5AA Large

2.7Fail

2.0Fail

1.6Fail

Black BG

4.1AA Large

5.9AA

7.9AAA

10.3AAA

13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8932

969686

A1A1AB

B4B43D

C2C2AE

Deuteranopia

939E32

999D86

A1A2AA

B2B147

C0BCB2

Tritanopia

C33333

A98483

A5A7A6

AB5E65

B1BABC

Achromatopsia

626262

8B8B8B

A0A0A0

A6A6A6

C7C7C7

Shades & Tints Shades & Tints

#CA3730

Dark

Light

#AB7B8A

Dark

Light

#A59BB0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ca3730;
  --color-2: #ab7b8a;
  --color-3: #a59bb0;
  --color-4: #aac013;
  --color-5: #afdba0;
}

SCSS

$color-1: #ca3730;
$color-2: #ab7b8a;
$color-3: #a59bb0;
$color-4: #aac013;
$color-5: #afdba0;

TAILWIND

colors: {
  'brand-1': '#ca3730',
  'brand-2': '#ab7b8a',
  'brand-3': '#a59bb0',
  'brand-4': '#aac013',
  'brand-5': '#afdba0',
}

RGB Array

[202, 55, 48], [171, 123, 138], [165, 155, 176], [170, 192, 19], [175, 219, 160]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CA3730, #AB7B8A, #A59BB0, #AAC013, #AFDBA0 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: #ca3730; --color-2: #ab7b8a; --color-3: #a59bb0; --color-4: #aac013; --color-5: #afdba0. 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