← Back to Editor

#3096A6 · #92B6A0 · #D2D5A5 · #EBF5C9

A 4-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

#3096A6

Lake Blue · LightSeaGreen · Mint Ice

HEX
#3096A6
RGB
rgb(48, 150, 166)
HSL
hsl(188, 55%, 42%)
HSB
hsb(188, 71%, 65%)
CMYK
cmyk(71%, 10%, 0%, 35%)
Oklch
oklch(62.2% 0.094 210.1)

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

#92B6A0

Celadon · DarkSeaGreen · Apple Green

HEX
#92B6A0
RGB
rgb(146, 182, 160)
HSL
hsl(143, 20%, 64%)
HSB
hsb(143, 20%, 71%)
CMYK
cmyk(20%, 0%, 12%, 29%)
Oklch
oklch(74.3% 0.050 158.1)

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

#D2D5A5

Fresh Green · Silver · Sunflower

HEX
#D2D5A5
RGB
rgb(210, 213, 165)
HSL
hsl(64, 36%, 74%)
HSB
hsb(64, 23%, 84%)
CMYK
cmyk(1%, 0%, 23%, 16%)
Oklch
oklch(85.9% 0.064 110.6)

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

#EBF5C9

Willow Green · Beige · Mint Green

HEX
#EBF5C9
RGB
rgb(235, 245, 201)
HSL
hsl(74, 69%, 87%)
HSB
hsb(74, 18%, 96%)
CMYK
cmyk(4%, 0%, 18%, 4%)
Oklch
oklch(95.1% 0.058 117.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3096A6
A64030

Analogous

30A67B
3096A6
305BA6

Triadic

3096A6
A63096
96A630

Split-Comp.

3096A6
A6305B
A67B30

Tetradic

3096A6
7B30A6
A64030
5BA630

Contrast Matrix WCAG 2.1 Contrast

3096A6
92B6A0
D2D5A5
EBF5C9
—
1.6
Fail
2.3
Fail
3.1
AA Large
1.6
Fail
—
1.5
Fail
2.0
Fail
2.3
Fail
1.5
Fail
—
1.3
Fail
3.1
AA Large
2.0
Fail
1.3
Fail
—
White BG
3.5AA Large
2.2Fail
1.5Fail
1.1Fail
Black BG
6.0AA
9.4AAA
13.8AAA
18.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5C5DA2
A2A2A5
D3D3B1
EFEFD4

Deuteranopia

564FA1
A09DA7
D3D3B3
EFEED6

Tritanopia

359F9E
94AAAA
D2BABC
ECDCDE

Achromatopsia

797979
A9A9A9
CFCFCF
EDEDED

Shades & Tints Shades & Tints

#3096A6

Dark
Light

#92B6A0

Dark
Light

#D2D5A5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3096a6;
  --color-2: #92b6a0;
  --color-3: #d2d5a5;
  --color-4: #ebf5c9;
}

SCSS

$color-1: #3096a6;
$color-2: #92b6a0;
$color-3: #d2d5a5;
$color-4: #ebf5c9;

TAILWIND

colors: {
  'brand-1': '#3096a6',
  'brand-2': '#92b6a0',
  'brand-3': '#d2d5a5',
  'brand-4': '#ebf5c9',
}

RGB Array

[48, 150, 166], [146, 182, 160], [210, 213, 165], [235, 245, 201]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #3096A6, #92B6A0, #D2D5A5, #EBF5C9 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 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #3096a6; --color-2: #92b6a0; --color-3: #d2d5a5; --color-4: #ebf5c9. 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 4-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