#C64C32 + #F49E50 + #FDFDBD + #AFBCCB + #7B93B0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C64C32

Crimson · Chocolate · Passion Red

HEX

#C64C32

RGB

rgb(198, 76, 50)

HSL

hsl(11, 60%, 49%)

HSB

hsb(11, 75%, 78%)

CMYK

cmyk(0%, 62%, 75%, 22%)

Oklch

oklch(57.6% 0.161 33.7)

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

#F49E50

Apricot · SandyBrown · Warm Sun

HEX

#F49E50

RGB

rgb(244, 158, 80)

HSL

hsl(29, 88%, 64%)

HSB

hsb(29, 67%, 96%)

CMYK

cmyk(0%, 35%, 67%, 4%)

Oklch

oklch(77.1% 0.138 60.5)

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

#FDFDBD

Fresh Green · Bisque · Lemon Cream

HEX

#FDFDBD

RGB

rgb(253, 253, 189)

HSL

hsl(60, 94%, 87%)

HSB

hsb(60, 25%, 99%)

CMYK

cmyk(0%, 0%, 25%, 1%)

Oklch

oklch(97.9% 0.081 107.8)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#AFBCCB

Azure · Silver · Cobalt Blue

HEX

#AFBCCB

RGB

rgb(175, 188, 203)

HSL

hsl(212, 21%, 74%)

HSB

hsb(212, 14%, 80%)

CMYK

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

Oklch

oklch(79.0% 0.026 251.9)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#7B93B0

Azure · LightSlateGray · Navy Blue

HEX

#7B93B0

RGB

rgb(123, 147, 176)

HSL

hsl(213, 25%, 59%)

HSB

hsb(213, 30%, 69%)

CMYK

cmyk(30%, 16%, 0%, 31%)

Oklch

oklch(65.5% 0.051 253.4)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C64C32

32ACC8

Analogous

C83261

C64C32

C89832

Triadic

C64C32

32C84D

4D32C8

Split-Comp.

C64C32

32C898

3261C8

Tetradic

C64C32

61C832

32ACC8

9832C8

Contrast Matrix WCAG 2.1 Contrast

C64C32	F49E50	FDFDBD	AFBCCB	7B93B0
—	2.2 Fail	4.5 AA Large	2.4 Fail	1.5 Fail
2.2 Fail	—	2.0 Fail	1.1 Fail	1.5 Fail
4.5 AA Large	2.0 Fail	—	1.8 Fail	3.0 AA Large
2.4 Fail	1.1 Fail	1.8 Fail	—	1.6 Fail
1.5 Fail	1.5 Fail	3.0 AA Large	1.6 Fail	—

White BG

4.7AA

2.1Fail

1.1Fail

1.9Fail

3.2AA Large

Black BG

4.5AA Large

9.9AAA

20.0AAA

10.9AAA

6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

919038

CFCE63

FDFDCC

B5B5C7

8586A9

Deuteranopia

98A13A

D4DA67

FDFDD0

B4B3C7

8482A7

Tritanopia

C03D3E

F07275

FDD9DB

B0C5C4

7CA3A2

Achromatopsia

6E6E6E

AFAFAF

F6F6F6

BABABA

8F8F8F

Shades & Tints Shades & Tints

#C64C32

Dark

Light

#F49E50

Dark

Light

#FDFDBD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c64c32;
  --color-2: #f49e50;
  --color-3: #fdfdbd;
  --color-4: #afbccb;
  --color-5: #7b93b0;
}

SCSS

$color-1: #c64c32;
$color-2: #f49e50;
$color-3: #fdfdbd;
$color-4: #afbccb;
$color-5: #7b93b0;

TAILWIND

colors: {
  'brand-1': '#c64c32',
  'brand-2': '#f49e50',
  'brand-3': '#fdfdbd',
  'brand-4': '#afbccb',
  'brand-5': '#7b93b0',
}

RGB Array

[198, 76, 50], [244, 158, 80], [253, 253, 189], [175, 188, 203], [123, 147, 176]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C64C32, #F49E50, #FDFDBD, #AFBCCB, #7B93B0 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: #c64c32; --color-2: #f49e50; --color-3: #fdfdbd; --color-4: #afbccb; --color-5: #7b93b0. 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 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