#D4CCBA + #7CC1D6 + #78C261 + #C2C325 + #F77763 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D4CCBA

Goose Yellow · Silver · Lemon Cream

HEX

#D4CCBA

RGB

rgb(212, 204, 186)

HSL

hsl(42, 23%, 78%)

HSB

hsb(42, 12%, 83%)

CMYK

cmyk(0%, 4%, 12%, 17%)

Oklch

oklch(84.7% 0.026 86.9)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#7CC1D6

Sky Blue · SkyBlue · Lake Green

HEX

#7CC1D6

RGB

rgb(124, 193, 214)

HSL

hsl(194, 52%, 66%)

HSB

hsb(194, 42%, 84%)

CMYK

cmyk(42%, 10%, 0%, 16%)

Oklch

oklch(77.3% 0.076 219.1)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#78C261

Celadon · DarkSeaGreen · Olive Green

HEX

#78C261

RGB

rgb(120, 194, 97)

HSL

hsl(106, 44%, 57%)

HSB

hsb(106, 50%, 76%)

CMYK

cmyk(38%, 0%, 50%, 24%)

Oklch

oklch(74.3% 0.151 138.7)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#C2C325

Autumn Sage · GoldenRod · Honey Gold

HEX

#C2C325

RGB

rgb(194, 195, 37)

HSL

hsl(60, 68%, 45%)

HSB

hsb(60, 81%, 76%)

CMYK

cmyk(1%, 0%, 81%, 24%)

Oklch

oklch(79.1% 0.164 110.0)

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

#F77763

Peach Pink · Salmon · Coral Red

HEX

#F77763

RGB

rgb(247, 119, 99)

HSL

hsl(8, 90%, 68%)

HSB

hsb(8, 60%, 97%)

CMYK

cmyk(0%, 52%, 60%, 3%)

Oklch

oklch(71.5% 0.161 30.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4CCBA

BAC2D4

Analogous

D4BFBA

D4CCBA

CFD4BA

Triadic

D4CCBA

BAD4CC

CCBAD4

Split-Comp.

D4CCBA

BACFD4

BFBAD4

Tetradic

D4CCBA

BAD4BF

BAC2D4

D4BACF

Contrast Matrix WCAG 2.1 Contrast

D4CCBA	7CC1D6	78C261	C2C325	F77763
—	1.3 Fail	1.4 Fail	1.2 Fail	1.7 Fail
1.3 Fail	—	1.1 Fail	1.1 Fail	1.3 Fail
1.4 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.2 Fail	1.1 Fail	1.1 Fail	—	1.4 Fail
1.7 Fail	1.3 Fail	1.2 Fail	1.4 Fail	—

White BG

1.6Fail

2.0Fail

2.2Fail

1.9Fail

2.7Fail

Black BG

13.1AAA

10.5AAA

9.7AAA

11.1AAA

7.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D0BE

9A9AD1

989978

C2C24B

C0BE68

Deuteranopia

D1D2BF

9691D0

948E7E

C2C254

C7D169

Tritanopia

D4C2C3

7FCDCC

7C8B8F

C26970

F16C6D

Achromatopsia

CCCCCC

AFAFAF

A1A1A1

B1B1B1

9B9B9B

Shades & Tints Shades & Tints

#D4CCBA

Dark

Light

#7CC1D6

Dark

Light

#78C261

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4ccba;
  --color-2: #7cc1d6;
  --color-3: #78c261;
  --color-4: #c2c325;
  --color-5: #f77763;
}

SCSS

$color-1: #d4ccba;
$color-2: #7cc1d6;
$color-3: #78c261;
$color-4: #c2c325;
$color-5: #f77763;

TAILWIND

colors: {
  'brand-1': '#d4ccba',
  'brand-2': '#7cc1d6',
  'brand-3': '#78c261',
  'brand-4': '#c2c325',
  'brand-5': '#f77763',
}

RGB Array

[212, 204, 186], [124, 193, 214], [120, 194, 97], [194, 195, 37], [247, 119, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #D4CCBA, #7CC1D6, #78C261, #C2C325, #F77763 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: #d4ccba; --color-2: #7cc1d6; --color-3: #78c261; --color-4: #c2c325; --color-5: #f77763. 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 warm-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