← Back to Editor

#3B759A · #89ACAE · #B1C8B8 · #D8E3C2 · #FFFFCC

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#3B759A

Slate Blue · SteelBlue · Navy Blue

HEX
#3B759A
RGB
rgb(59, 117, 154)
HSL
hsl(203, 45%, 42%)
HSB
hsb(203, 62%, 60%)
CMYK
cmyk(62%, 24%, 0%, 40%)
Oklch
oklch(53.9% 0.084 239.0)

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

#89ACAE

Sky Blue · DarkGray · Lake Green

HEX
#89ACAE
RGB
rgb(137, 172, 174)
HSL
hsl(183, 19%, 61%)
HSB
hsb(183, 21%, 68%)
CMYK
cmyk(21%, 1%, 0%, 32%)
Oklch
oklch(71.9% 0.038 200.7)

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

#B1C8B8

Celadon · Silver · Apple Green

HEX
#B1C8B8
RGB
rgb(177, 200, 184)
HSL
hsl(138, 17%, 74%)
HSB
hsb(138, 12%, 78%)
CMYK
cmyk(12%, 0%, 8%, 22%)
Oklch
oklch(81.1% 0.033 155.2)

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

#D8E3C2

Willow Green · LightGray · Mint Green

HEX
#D8E3C2
RGB
rgb(216, 227, 194)
HSL
hsl(80, 37%, 83%)
HSB
hsb(80, 15%, 89%)
CMYK
cmyk(5%, 0%, 15%, 11%)
Oklch
oklch(89.9% 0.046 122.3)

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

#FFFFCC

Fresh Green · LightYellow · Lemon Cream

HEX
#FFFFCC
RGB
rgb(255, 255, 204)
HSL
hsl(60, 100%, 90%)
HSB
hsb(60, 20%, 100%)
CMYK
cmyk(0%, 0%, 20%, 0%)
Oklch
oklch(98.8% 0.065 107.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B759A
9B603B

Analogous

3B9B90
3B759A
3B469B

Triadic

3B759A
9B3B76
769B3B

Split-Comp.

3B759A
9B3B46
9B903B

Tetradic

3B759A
903B9B
9B603B
469B3B

Contrast Matrix WCAG 2.1 Contrast

3B759A
89ACAE
B1C8B8
D8E3C2
FFFFCC
—
2.0
Fail
2.8
Fail
3.7
AA Large
4.9
AA
2.0
Fail
—
1.4
Fail
1.8
Fail
2.4
Fail
2.8
Fail
1.4
Fail
—
1.3
Fail
1.7
Fail
3.7
AA Large
1.8
Fail
1.3
Fail
—
1.3
Fail
4.9
AA
2.4
Fail
1.7
Fail
1.3
Fail
—
White BG
5.0AA
2.4Fail
1.8Fail
1.3Fail
1.0Fail
Black BG
4.2AA Large
8.6AAA
11.8AAA
15.7AAA
20.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

545591
9898AE
BBBBBC
DDDDCA
FFFFD8

Deuteranopia

514C8F
9694AD
BAB8BD
DCDBCC
FFFFDB

Tritanopia

3E8A88
8BADAD
B2BFC0
D9D0D2
FFE2E4

Achromatopsia

686868
A2A2A2
BFBFBF
DCDCDC
F9F9F9

Shades & Tints Shades & Tints

#3B759A

Dark
Light

#89ACAE

Dark
Light

#B1C8B8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b759a;
  --color-2: #89acae;
  --color-3: #b1c8b8;
  --color-4: #d8e3c2;
  --color-5: #ffffcc;
}

SCSS

$color-1: #3b759a;
$color-2: #89acae;
$color-3: #b1c8b8;
$color-4: #d8e3c2;
$color-5: #ffffcc;

TAILWIND

colors: {
  'brand-1': '#3b759a',
  'brand-2': '#89acae',
  'brand-3': '#b1c8b8',
  'brand-4': '#d8e3c2',
  'brand-5': '#ffffcc',
}

RGB Array

[59, 117, 154], [137, 172, 174], [177, 200, 184], [216, 227, 194], [255, 255, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3B759A, #89ACAE, #B1C8B8, #D8E3C2, #FFFFCC is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #3b759a; --color-2: #89acae; --color-3: #b1c8b8; --color-4: #d8e3c2; --color-5: #ffffcc. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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