#62688C + #BE7C98 + #CEBDAD + #EDE4C3 + #E1C65D · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#62688C

Indigo · SlateGray · Navy Blue

HEX

#62688C

RGB

rgb(98, 104, 140)

HSL

hsl(231, 18%, 47%)

HSB

hsb(231, 30%, 55%)

CMYK

cmyk(30%, 26%, 0%, 45%)

Oklch

oklch(52.6% 0.057 276.9)

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

#BE7C98

Rouge · DarkGray · Rose Pink

HEX

#BE7C98

RGB

rgb(190, 124, 152)

HSL

hsl(335, 34%, 62%)

HSB

hsb(335, 35%, 75%)

CMYK

cmyk(0%, 35%, 20%, 25%)

Oklch

oklch(66.3% 0.089 352.8)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#CEBDAD

Apricot · Silver · Warm Sun

HEX

#CEBDAD

RGB

rgb(206, 189, 173)

HSL

hsl(29, 25%, 74%)

HSB

hsb(29, 16%, 81%)

CMYK

cmyk(0%, 8%, 16%, 19%)

Oklch

oklch(80.8% 0.029 65.7)

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

#EDE4C3

Goose Yellow · Bisque · Lemon Cream

HEX

#EDE4C3

RGB

rgb(237, 228, 195)

HSL

hsl(47, 54%, 85%)

HSB

hsb(47, 18%, 93%)

CMYK

cmyk(0%, 4%, 18%, 7%)

Oklch

oklch(91.8% 0.045 94.5)

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

#E1C65D

Ginger · SandyBrown · Sunflower

HEX

#E1C65D

RGB

rgb(225, 198, 93)

HSL

hsl(48, 69%, 62%)

HSB

hsb(48, 59%, 88%)

CMYK

cmyk(0%, 12%, 59%, 12%)

Oklch

oklch(82.9% 0.128 95.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

62688C

8D8762

Analogous

627E8D

62688C

71628D

Triadic

62688C

8D6269

698D62

Split-Comp.

62688C

8D7162

7E8D62

Tetradic

62688C

8D627E

8D8762

628D71

Contrast Matrix WCAG 2.1 Contrast

62688C	BE7C98	CEBDAD	EDE4C3	E1C65D
—	1.7 Fail	3.0 Fail	4.3 AA Large	3.2 AA Large
1.7 Fail	—	1.8 Fail	2.5 Fail	1.9 Fail
3.0 Fail	1.8 Fail	—	1.4 Fail	1.1 Fail
4.3 AA Large	2.5 Fail	1.4 Fail	—	1.3 Fail
3.2 AA Large	1.9 Fail	1.1 Fail	1.3 Fail	—

White BG

5.4AA

3.2AA Large

1.8Fail

1.3Fail

1.7Fail

Black BG

3.9AA Large

6.5AA

11.5AAA

16.5AAA

12.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

656583

A1A191

C7C6B1

E9E9CB

D5D576

Deuteranopia

646481

A5AA90

C8C9B2

EAEACD

D7D97D

Tritanopia

627C7B

BB8C8B

CDB4B5

EDD1D3

E08A8F

Achromatopsia

6A6A6A

939393

C0C0C0

E3E3E3

C2C2C2

Shades & Tints Shades & Tints

#62688C

Dark

Light

#BE7C98

Dark

Light

#CEBDAD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #62688c;
  --color-2: #be7c98;
  --color-3: #cebdad;
  --color-4: #ede4c3;
  --color-5: #e1c65d;
}

SCSS

$color-1: #62688c;
$color-2: #be7c98;
$color-3: #cebdad;
$color-4: #ede4c3;
$color-5: #e1c65d;

TAILWIND

colors: {
  'brand-1': '#62688c',
  'brand-2': '#be7c98',
  'brand-3': '#cebdad',
  'brand-4': '#ede4c3',
  'brand-5': '#e1c65d',
}

RGB Array

[98, 104, 140], [190, 124, 152], [206, 189, 173], [237, 228, 195], [225, 198, 93]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #62688C, #BE7C98, #CEBDAD, #EDE4C3, #E1C65D 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: #62688c; --color-2: #be7c98; --color-3: #cebdad; --color-4: #ede4c3; --color-5: #e1c65d. 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 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