#4A97BA + #4ABABB + #74CFC5 + #D9D7B2 + #F2E8DC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#4A97BA

Slate Blue · SteelBlue · Lake Green

HEX

#4A97BA

RGB

rgb(74, 151, 186)

HSL

hsl(199, 45%, 51%)

HSB

hsb(199, 60%, 73%)

CMYK

cmyk(60%, 19%, 0%, 27%)

Oklch

oklch(64.2% 0.092 230.1)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#4ABABB

Slate Blue · MediumTurquoise · Lake Green

HEX

#4ABABB

RGB

rgb(74, 186, 187)

HSL

hsl(181, 45%, 51%)

HSB

hsb(181, 60%, 73%)

CMYK

cmyk(60%, 1%, 0%, 27%)

Oklch

oklch(72.6% 0.100 196.0)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#74CFC5

Jade · MediumAquaMarine · Lake Green

HEX

#74CFC5

RGB

rgb(116, 207, 197)

HSL

hsl(173, 49%, 63%)

HSB

hsb(173, 44%, 81%)

CMYK

cmyk(44%, 0%, 5%, 19%)

Oklch

oklch(79.5% 0.089 186.4)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#D9D7B2

Fresh Green · Wheat · Lemon Cream

HEX

#D9D7B2

RGB

rgb(217, 215, 178)

HSL

hsl(57, 34%, 77%)

HSB

hsb(57, 18%, 85%)

CMYK

cmyk(0%, 1%, 18%, 15%)

Oklch

oklch(87.1% 0.049 104.8)

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

#F2E8DC

Goose Yellow · Beige · Peach Orange

HEX

#F2E8DC

RGB

rgb(242, 232, 220)

HSL

hsl(33, 46%, 91%)

HSB

hsb(33, 9%, 95%)

CMYK

cmyk(0%, 4%, 9%, 5%)

Oklch

oklch(93.6% 0.019 72.6)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4A97BA

BA6D4A

Analogous

4ABAA6

4A97BA

4A5EBA

Triadic

4A97BA

BA4A97

97BA4A

Split-Comp.

4A97BA

BA4A5E

BAA64A

Tetradic

4A97BA

A64ABA

BA6D4A

5EBA4A

Contrast Matrix WCAG 2.1 Contrast

4A97BA	4ABABB	74CFC5	D9D7B2	F2E8DC
—	1.4 Fail	1.8 Fail	2.2 Fail	2.7 Fail
1.4 Fail	—	1.3 Fail	1.6 Fail	1.9 Fail
1.8 Fail	1.3 Fail	—	1.2 Fail	1.5 Fail
2.2 Fail	1.6 Fail	1.2 Fail	—	1.2 Fail
2.7 Fail	1.9 Fail	1.5 Fail	1.2 Fail	—

White BG

3.3AA Large

2.3Fail

1.8Fail

1.5Fail

1.2Fail

Black BG

6.4AA

9.0AAA

11.5AAA

14.3AAA

17.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6B6CB2

7A7CBB

9B9CC7

D8D8BB

EEEEDF

Deuteranopia

6761B0

746CBB

968FC8

D8D8BD

EEEFE0

Tritanopia

4EABA9

50BBBB

79C9CA

D9C2C4

F1E1E2

Achromatopsia

848484

999999

B3B3B3

D3D3D3

EAEAEA

Shades & Tints Shades & Tints

#4A97BA

Dark

Light

#4ABABB

Dark

Light

#74CFC5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4a97ba;
  --color-2: #4ababb;
  --color-3: #74cfc5;
  --color-4: #d9d7b2;
  --color-5: #f2e8dc;
}

SCSS

$color-1: #4a97ba;
$color-2: #4ababb;
$color-3: #74cfc5;
$color-4: #d9d7b2;
$color-5: #f2e8dc;

TAILWIND

colors: {
  'brand-1': '#4a97ba',
  'brand-2': '#4ababb',
  'brand-3': '#74cfc5',
  'brand-4': '#d9d7b2',
  'brand-5': '#f2e8dc',
}

RGB Array

[74, 151, 186], [74, 186, 187], [116, 207, 197], [217, 215, 178], [242, 232, 220]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4A97BA, #4ABABB, #74CFC5, #D9D7B2, #F2E8DC 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: #4a97ba; --color-2: #4ababb; --color-3: #74cfc5; --color-4: #d9d7b2; --color-5: #f2e8dc. 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