← Back to Editor

#FFFBF2 · #D2EDF4 · #98C6BC · #3A7682 · #1A3D51

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#FFFBF2

Goose Yellow · SeaShell · Lemon Cream

HEX
#FFFBF2
RGB
rgb(255, 251, 242)
HSL
hsl(42, 100%, 97%)
HSB
hsb(42, 5%, 100%)
CMYK
cmyk(0%, 2%, 5%, 0%)
Oklch
oklch(98.9% 0.013 86.8)

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

#D2EDF4

Sky Blue · Lavender · Glacier Blue

HEX
#D2EDF4
RGB
rgb(210, 237, 244)
HSL
hsl(192, 61%, 89%)
HSB
hsb(192, 14%, 96%)
CMYK
cmyk(14%, 3%, 0%, 4%)
Oklch
oklch(92.9% 0.030 215.1)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#98C6BC

Jade · DarkGray · Lake Green

HEX
#98C6BC
RGB
rgb(152, 198, 188)
HSL
hsl(167, 29%, 69%)
HSB
hsb(167, 23%, 78%)
CMYK
cmyk(23%, 0%, 5%, 22%)
Oklch
oklch(79.1% 0.051 180.1)

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

#3A7682

Slate Blue · SeaGreen · Mint Ice

HEX
#3A7682
RGB
rgb(58, 118, 130)
HSL
hsl(190, 38%, 37%)
HSB
hsb(190, 55%, 51%)
CMYK
cmyk(55%, 9%, 0%, 49%)
Oklch
oklch(53.1% 0.065 212.3)

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

#1A3D51

Lake Blue · DarkSlateGray · Prussian Blue

HEX
#1A3D51
RGB
rgb(26, 61, 81)
HSL
hsl(202, 51%, 21%)
HSB
hsb(202, 68%, 32%)
CMYK
cmyk(68%, 25%, 0%, 68%)
Oklch
oklch(34.4% 0.053 236.3)

Traditional「Lake Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFFBF2
F0F4FF

Analogous

FFF3F0
FFFBF2
FCFFF0

Triadic

FFFBF2
F0FFFA
FAF0FF

Split-Comp.

FFFBF2
F0FCFF
F3F0FF

Tetradic

FFFBF2
F0FFF3
F0F4FF
FFF0FC

Contrast Matrix WCAG 2.1 Contrast

FFFBF2
D2EDF4
98C6BC
3A7682
1A3D51
—
1.2
Fail
1.8
Fail
5.0
AA
11.1
AAA
1.2
Fail
—
1.5
Fail
4.2
AA Large
9.4
AAA
1.8
Fail
1.5
Fail
—
2.7
Fail
6.1
AA
5.0
AA
4.2
AA Large
2.7
Fail
—
2.2
Fail
11.1
AAA
9.4
AAA
6.1
AA
2.2
Fail
—
White BG
1.0Fail
1.2Fail
1.9Fail
5.1AA
11.5AAA
Black BG
20.3AAA
17.2AAA
11.1AAA
4.1AA Large
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

FDFDF4
DEDEF2
ACACBE
54557F
29294C

Deuteranopia

FEFEF5
DCDAF2
A9A6BF
514C7E
27254B

Tritanopia

FFF6F6
D3F1F1
9AC0C1
3D7D7C
1C4848

Achromatopsia

FBFBFB
E6E6E6
B7B7B7
656565
353535

Shades & Tints Shades & Tints

#FFFBF2

Dark
Light

#D2EDF4

Dark
Light

#98C6BC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fffbf2;
  --color-2: #d2edf4;
  --color-3: #98c6bc;
  --color-4: #3a7682;
  --color-5: #1a3d51;
}

SCSS

$color-1: #fffbf2;
$color-2: #d2edf4;
$color-3: #98c6bc;
$color-4: #3a7682;
$color-5: #1a3d51;

TAILWIND

colors: {
  'brand-1': '#fffbf2',
  'brand-2': '#d2edf4',
  'brand-3': '#98c6bc',
  'brand-4': '#3a7682',
  'brand-5': '#1a3d51',
}

RGB Array

[255, 251, 242], [210, 237, 244], [152, 198, 188], [58, 118, 130], [26, 61, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFFBF2, #D2EDF4, #98C6BC, #3A7682, #1A3D51 is ideal for: 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: #fffbf2; --color-2: #d2edf4; --color-3: #98c6bc; --color-4: #3a7682; --color-5: #1a3d51. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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