← Back to Editor

#B0D9FF · #6F705A · #0F0F0F · #F0E2C2

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

#B0D9FF

Sky Blue · LightBlue · Sky Blue

HEX
#B0D9FF
RGB
rgb(176, 217, 255)
HSL
hsl(209, 100%, 85%)
HSB
hsb(209, 31%, 100%)
CMYK
cmyk(31%, 15%, 0%, 0%)
Oklch
oklch(86.9% 0.068 246.6)

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

#6F705A

Autumn Sage · DimGray · Honey Gold

HEX
#6F705A
RGB
rgb(111, 112, 90)
HSL
hsl(63, 11%, 40%)
HSB
hsb(63, 20%, 44%)
CMYK
cmyk(1%, 0%, 20%, 56%)
Oklch
oklch(53.8% 0.033 109.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#0F0F0F

Ink Black · Black · Jet Black

HEX
#0F0F0F
RGB
rgb(15, 15, 15)
HSL
hsl(0, 0%, 6%)
HSB
hsb(0, 0%, 6%)
CMYK
cmyk(0%, 0%, 0%, 94%)
Oklch
oklch(16.8% 0.000 89.9)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

#F0E2C2

Goose Yellow · Bisque · Lemon Cream

HEX
#F0E2C2
RGB
rgb(240, 226, 194)
HSL
hsl(42, 61%, 85%)
HSB
hsb(42, 19%, 94%)
CMYK
cmyk(0%, 6%, 19%, 6%)
Oklch
oklch(91.6% 0.045 87.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B0D9FF
FFD7B3

Analogous

B3FFFE
B0D9FF
B3B4FF

Triadic

B0D9FF
FFB3DA
DAFFB3

Split-Comp.

B0D9FF
FFB3B4
FFFEB3

Tetradic

B0D9FF
FEB3FF
FFD7B3
B4FFB3

Contrast Matrix WCAG 2.1 Contrast

B0D9FF
6F705A
0F0F0F
F0E2C2
—
3.4
AA Large
13.0
AAA
1.2
Fail
3.4
AA Large
—
3.8
AA Large
4.0
AA Large
13.0
AAA
3.8
AA Large
—
14.9
AAA
1.2
Fail
4.0
AA Large
14.9
AAA
—
White BG
1.5Fail
5.1AA
19.2AAA
1.3Fail
Black BG
14.2AAA
4.1AA Large
1.1Fail
16.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C2F6
6F6F5F
0F0F0F
EAEACA

Deuteranopia

BFBCF4
6F6F61
0F0F0F
EBECCC

Tritanopia

B2EFED
6F6464
0F0F0F
EFD0D1

Achromatopsia

D1D1D1
6D6D6D
0F0F0F
E3E3E3

Shades & Tints Shades & Tints

#B0D9FF

Dark
Light

#6F705A

Dark
Light

#0F0F0F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b0d9ff;
  --color-2: #6f705a;
  --color-3: #0f0f0f;
  --color-4: #f0e2c2;
}

SCSS

$color-1: #b0d9ff;
$color-2: #6f705a;
$color-3: #0f0f0f;
$color-4: #f0e2c2;

TAILWIND

colors: {
  'brand-1': '#b0d9ff',
  'brand-2': '#6f705a',
  'brand-3': '#0f0f0f',
  'brand-4': '#f0e2c2',
}

RGB Array

[176, 217, 255], [111, 112, 90], [15, 15, 15], [240, 226, 194]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #B0D9FF, #6F705A, #0F0F0F, #F0E2C2 is ideal for: 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: #b0d9ff; --color-2: #6f705a; --color-3: #0f0f0f; --color-4: #f0e2c2. 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 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