← Back to Editor

#1B6475 · #589FA3 · #ADD8C7 · #E3FAF1 · #FFFFFF

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#1B6475

Lake Blue · Teal · Mint Ice

HEX
#1B6475
RGB
rgb(27, 100, 117)
HSL
hsl(191, 63%, 28%)
HSB
hsb(191, 77%, 46%)
CMYK
cmyk(77%, 15%, 0%, 54%)
Oklch
oklch(46.7% 0.074 217.0)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#589FA3

Slate Blue · CadetBlue · Mint Ice

HEX
#589FA3
RGB
rgb(88, 159, 163)
HSL
hsl(183, 30%, 49%)
HSB
hsb(183, 46%, 64%)
CMYK
cmyk(46%, 2%, 0%, 36%)
Oklch
oklch(65.8% 0.072 200.3)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#ADD8C7

Jade · LightSteelBlue · Apple Green

HEX
#ADD8C7
RGB
rgb(173, 216, 199)
HSL
hsl(156, 36%, 76%)
HSB
hsb(156, 20%, 85%)
CMYK
cmyk(20%, 0%, 8%, 15%)
Oklch
oklch(84.7% 0.051 169.0)

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

#E3FAF1

Jade · Lavender · Mint Green

HEX
#E3FAF1
RGB
rgb(227, 250, 241)
HSL
hsl(157, 70%, 94%)
HSB
hsb(157, 9%, 98%)
CMYK
cmyk(9%, 0%, 4%, 2%)
Oklch
oklch(96.6% 0.027 170.3)

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

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1B6475
742B1A

Analogous

1A7458
1B6475
1A3774

Triadic

1B6475
741A64
64741A

Split-Comp.

1B6475
741A37
74581A

Tetradic

1B6475
581A74
742B1A
37741A

Contrast Matrix WCAG 2.1 Contrast

1B6475
589FA3
ADD8C7
E3FAF1
FFFFFF
—
2.2
Fail
4.3
AA Large
6.1
AA
6.7
AA
2.2
Fail
—
1.9
Fail
2.8
Fail
3.0
AA Large
4.3
AA Large
1.9
Fail
—
1.4
Fail
1.6
Fail
6.1
AA
2.8
Fail
1.4
Fail
—
1.1
Fail
6.7
AA
3.0
AA Large
1.6
Fail
1.1
Fail
—
White BG
6.7AA
3.0AA Large
1.6Fail
1.1Fail
1.0Fail
Black BG
3.1AA Large
6.9AA
13.4AAA
19.2AAA
21.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3B3B71
7777A2
C0C0CB
EDEDF3
FFFFFF

Deuteranopia

363170
736DA2
BDBACC
ECEAF4
FFFFFF

Tritanopia

1F6E6D
5CA1A1
AFCECF
E4F5F5
FFFFFF

Achromatopsia

505050
8A8A8A
C9C9C9
F2F2F2
FFFFFF

Shades & Tints Shades & Tints

#1B6475

Dark
Light

#589FA3

Dark
Light

#ADD8C7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1b6475;
  --color-2: #589fa3;
  --color-3: #add8c7;
  --color-4: #e3faf1;
  --color-5: #ffffff;
}

SCSS

$color-1: #1b6475;
$color-2: #589fa3;
$color-3: #add8c7;
$color-4: #e3faf1;
$color-5: #ffffff;

TAILWIND

colors: {
  'brand-1': '#1b6475',
  'brand-2': '#589fa3',
  'brand-3': '#add8c7',
  'brand-4': '#e3faf1',
  'brand-5': '#ffffff',
}

RGB Array

[27, 100, 117], [88, 159, 163], [173, 216, 199], [227, 250, 241], [255, 255, 255]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1B6475, #589FA3, #ADD8C7, #E3FAF1, #FFFFFF 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: #1b6475; --color-2: #589fa3; --color-3: #add8c7; --color-4: #e3faf1; --color-5: #ffffff. 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