← Back to Editor

#0D1A26 · #311C0D · #BFE3EE · #7D7D3E

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

#0D1A26

Slate Blue · Black · Deep Sea Blue

HEX
#0D1A26
RGB
rgb(13, 26, 38)
HSL
hsl(209, 49%, 10%)
HSB
hsb(209, 66%, 15%)
CMYK
cmyk(66%, 32%, 0%, 85%)
Oklch
oklch(21.2% 0.030 247.5)

Traditional「Slate Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#311C0D

Tangerine · Black · Cinnamon

HEX
#311C0D
RGB
rgb(49, 28, 13)
HSL
hsl(25, 58%, 12%)
HSB
hsb(25, 73%, 19%)
CMYK
cmyk(0%, 43%, 73%, 81%)
Oklch
oklch(25.0% 0.042 55.1)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#BFE3EE

Sky Blue · LightBlue · Glacier Blue

HEX
#BFE3EE
RGB
rgb(191, 227, 238)
HSL
hsl(194, 58%, 84%)
HSB
hsb(194, 20%, 93%)
CMYK
cmyk(20%, 5%, 0%, 7%)
Oklch
oklch(89.3% 0.041 218.2)

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

#7D7D3E

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#7D7D3E
RGB
rgb(125, 125, 62)
HSL
hsl(60, 34%, 37%)
HSB
hsb(60, 50%, 49%)
CMYK
cmyk(0%, 0%, 50%, 51%)
Oklch
oklch(57.5% 0.085 108.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0D1A26
26190D

Analogous

0D2626
0D1A26
0D0D26

Triadic

0D1A26
260D1A
1A260D

Split-Comp.

0D1A26
260D0D
26260D

Tetradic

0D1A26
260D26
26190D
0D260D

Contrast Matrix WCAG 2.1 Contrast

0D1A26
311C0D
BFE3EE
7D7D3E
—
1.1
Fail
12.9
AAA
4.1
AA Large
1.1
Fail
—
11.9
AAA
3.7
AA Large
12.9
AAA
11.9
AAA
—
3.2
AA Large
4.1
AA Large
3.7
AA Large
3.2
AA Large
—
White BG
17.6AAA
16.1AAA
1.4Fail
4.3AA Large
Black BG
1.2Fail
1.3Fail
15.4AAA
4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

131323
282811
CFCFEB
7D7D4D

Deuteranopia

121122
292B12
CDCAEB
7D7D51

Tritanopia

0E2120
301314
C1E9E9
7D595C

Achromatopsia

171717
212121
D9D9D9
767676

Shades & Tints Shades & Tints

#0D1A26

Dark
Light

#311C0D

Dark
Light

#BFE3EE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0d1a26;
  --color-2: #311c0d;
  --color-3: #bfe3ee;
  --color-4: #7d7d3e;
}

SCSS

$color-1: #0d1a26;
$color-2: #311c0d;
$color-3: #bfe3ee;
$color-4: #7d7d3e;

TAILWIND

colors: {
  'brand-1': '#0d1a26',
  'brand-2': '#311c0d',
  'brand-3': '#bfe3ee',
  'brand-4': '#7d7d3e',
}

RGB Array

[13, 26, 38], [49, 28, 13], [191, 227, 238], [125, 125, 62]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #0D1A26, #311C0D, #BFE3EE, #7D7D3E is ideal for: tech websites, dark mode UIs, game UIs, 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: #0d1a26; --color-2: #311c0d; --color-3: #bfe3ee; --color-4: #7d7d3e. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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