← Back to Editor

#67616B · #B3D4EF · #8AF6E7 · #C2F9E4 · #F9EDCF

spring

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#67616B

Ink Gray · DimGray · Charcoal

HEX
#67616B
RGB
rgb(103, 97, 107)
HSL
hsl(276, 5%, 40%)
HSB
hsb(276, 9%, 42%)
CMYK
cmyk(4%, 9%, 0%, 58%)
Oklch
oklch(50.2% 0.017 312.1)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#B3D4EF

Sky Blue · LightBlue · Sky Blue

HEX
#B3D4EF
RGB
rgb(179, 212, 239)
HSL
hsl(207, 65%, 82%)
HSB
hsb(207, 25%, 94%)
CMYK
cmyk(25%, 11%, 0%, 6%)
Oklch
oklch(85.5% 0.052 243.0)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

#8AF6E7

Jade · SkyBlue · Lake Green

HEX
#8AF6E7
RGB
rgb(138, 246, 231)
HSL
hsl(172, 86%, 75%)
HSB
hsb(172, 44%, 96%)
CMYK
cmyk(44%, 0%, 6%, 4%)
Oklch
oklch(90.4% 0.103 184.1)

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

#C2F9E4

Jade · LightBlue · Mint Green

HEX
#C2F9E4
RGB
rgb(194, 249, 228)
HSL
hsl(157, 82%, 87%)
HSB
hsb(157, 22%, 98%)
CMYK
cmyk(22%, 0%, 8%, 2%)
Oklch
oklch(93.9% 0.063 169.6)

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

#F9EDCF

Goose Yellow · Bisque · Lemon Cream

HEX
#F9EDCF
RGB
rgb(249, 237, 207)
HSL
hsl(43, 78%, 89%)
HSB
hsb(43, 17%, 98%)
CMYK
cmyk(0%, 5%, 17%, 2%)
Oklch
oklch(94.8% 0.041 88.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

67616B
656B61

Analogous

62616B
67616B
6B616A

Triadic

67616B
6B6761
616B67

Split-Comp.

67616B
6A6B61
616B62

Tetradic

67616B
6B6261
656B61
616A6B

Contrast Matrix WCAG 2.1 Contrast

67616B
B3D4EF
8AF6E7
C2F9E4
F9EDCF
—
3.9
AA Large
4.7
AA
5.1
AA
5.2
AA
3.9
AA Large
—
1.2
Fail
1.3
Fail
1.3
Fail
4.7
AA
1.2
Fail
—
1.1
Fail
1.1
Fail
5.1
AA
1.3
Fail
1.1
Fail
—
1.0
Fail
5.2
AA
1.3
Fail
1.1
Fail
1.0
Fail
—
White BG
6.0AA
1.5Fail
1.3Fail
1.2Fail
1.2Fail
Black BG
3.5AA Large
13.6AAA
16.4AAA
18.0AAA
18.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

646469
C1C2E8
B9BAEB
DADAE9
F4F4D6

Deuteranopia

656568
BFBDE7
B3AAEC
D7D3EA
F5F5D8

Tritanopia

676766
B5E3E2
8FEDEE
C5EDEE
F8DCDD

Achromatopsia

646464
CDCDCD
D4D4D4
E6E6E6
EDEDED

Shades & Tints Shades & Tints

#67616B

Dark
Light

#B3D4EF

Dark
Light

#8AF6E7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #67616b;
  --color-2: #b3d4ef;
  --color-3: #8af6e7;
  --color-4: #c2f9e4;
  --color-5: #f9edcf;
}

SCSS

$color-1: #67616b;
$color-2: #b3d4ef;
$color-3: #8af6e7;
$color-4: #c2f9e4;
$color-5: #f9edcf;

TAILWIND

colors: {
  'brand-1': '#67616b',
  'brand-2': '#b3d4ef',
  'brand-3': '#8af6e7',
  'brand-4': '#c2f9e4',
  'brand-5': '#f9edcf',
}

RGB Array

[103, 97, 107], [179, 212, 239], [138, 246, 231], [194, 249, 228], [249, 237, 207]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #67616B, #B3D4EF, #8AF6E7, #C2F9E4, #F9EDCF is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #67616b; --color-2: #b3d4ef; --color-3: #8af6e7; --color-4: #c2f9e4; --color-5: #f9edcf. 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 spring-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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