#AC708C + #A2CFB2 + #D4E9A4 + #FAB68F + #F0425B · spring - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AC708C

Dark Violet · Gray · Rose Pink

HEX

#AC708C

RGB

rgb(172, 112, 140)

HSL

hsl(332, 27%, 56%)

HSB

hsb(332, 35%, 67%)

CMYK

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

Oklch

oklch(61.7% 0.084 350.3)

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

#A2CFB2

Celadon · Silver · Apple Green

HEX

#A2CFB2

RGB

rgb(162, 207, 178)

HSL

hsl(141, 32%, 72%)

HSB

hsb(141, 22%, 81%)

CMYK

cmyk(22%, 0%, 14%, 19%)

Oklch

oklch(81.4% 0.062 156.5)

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

#D4E9A4

Willow Green · Khaki · Apple Green

HEX

#D4E9A4

RGB

rgb(212, 233, 164)

HSL

hsl(78, 61%, 78%)

HSB

hsb(78, 30%, 91%)

CMYK

cmyk(9%, 0%, 30%, 9%)

Oklch

oklch(90.2% 0.093 122.0)

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

#FAB68F

Apricot · BurlyWood · Peach Orange

HEX

#FAB68F

RGB

rgb(250, 182, 143)

HSL

hsl(22, 91%, 77%)

HSB

hsb(22, 43%, 98%)

CMYK

cmyk(0%, 27%, 43%, 2%)

Oklch

oklch(83.1% 0.095 50.8)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#F0425B

Vermilion · Tomato · Passion Red

HEX

#F0425B

RGB

rgb(240, 66, 91)

HSL

hsl(351, 85%, 60%)

HSB

hsb(351, 73%, 94%)

CMYK

cmyk(0%, 73%, 62%, 6%)

Oklch

oklch(64.0% 0.209 17.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AC708C

71AD91

Analogous

AD71AB

AC708C

AD7371

Triadic

AC708C

8DAD71

718DAD

Split-Comp.

AC708C

71AD73

71ABAD

Tetradic

AC708C

ABAD71

71AD91

7371AD

Contrast Matrix WCAG 2.1 Contrast

AC708C	A2CFB2	D4E9A4	FAB68F	F0425B
—	2.2 Fail	2.9 Fail	2.2 Fail	1.0 Fail
2.2 Fail	—	1.3 Fail	1.0 Fail	2.1 Fail
2.9 Fail	1.3 Fail	—	1.3 Fail	2.8 Fail
2.2 Fail	1.0 Fail	1.3 Fail	—	2.2 Fail
1.0 Fail	2.1 Fail	2.8 Fail	2.2 Fail	—

White BG

3.9AA Large

1.7Fail

1.3Fail

1.7Fail

3.7AA Large

Black BG

5.5AA

12.1AAA

16.0AAA

12.2AAA

5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

929185

B5B6B9

DDDDB5

DDDC98

A5A355

Deuteranopia

969A84

B3B0BB

DCDAB9

E1E69B

AFBC54

Tritanopia

A9807F

A4BFC0

D5C2C5

F7A0A2

E7504F

Achromatopsia

858585

BEBEBE

DBDBDB

C6C6C6

797979

Shades & Tints Shades & Tints

#AC708C

Dark

Light

#A2CFB2

Dark

Light

#D4E9A4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ac708c;
  --color-2: #a2cfb2;
  --color-3: #d4e9a4;
  --color-4: #fab68f;
  --color-5: #f0425b;
}

SCSS

$color-1: #ac708c;
$color-2: #a2cfb2;
$color-3: #d4e9a4;
$color-4: #fab68f;
$color-5: #f0425b;

TAILWIND

colors: {
  'brand-1': '#ac708c',
  'brand-2': '#a2cfb2',
  'brand-3': '#d4e9a4',
  'brand-4': '#fab68f',
  'brand-5': '#f0425b',
}

RGB Array

[172, 112, 140], [162, 207, 178], [212, 233, 164], [250, 182, 143], [240, 66, 91]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #AC708C, #A2CFB2, #D4E9A4, #FAB68F, #F0425B is ideal for: health products, baby brands, fresh-style blogs. 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: #ac708c; --color-2: #a2cfb2; --color-3: #d4e9a4; --color-4: #fab68f; --color-5: #f0425b. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 spring-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