#1F0F11 + #1B2930 + #164C5C + #207075 + #56768C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#1F0F11

Crimson · Black · Deep Berry

HEX

#1F0F11

RGB

rgb(31, 15, 17)

HSL

hsl(353, 35%, 9%)

HSB

hsb(353, 52%, 12%)

CMYK

cmyk(0%, 52%, 45%, 88%)

Oklch

oklch(19.2% 0.027 11.8)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#1B2930

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX

#1B2930

RGB

rgb(27, 41, 48)

HSL

hsl(200, 28%, 15%)

HSB

hsb(200, 44%, 19%)

CMYK

cmyk(44%, 15%, 0%, 81%)

Oklch

oklch(27.1% 0.023 230.3)

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

#164C5C

Lake Blue · DarkSlateGray · Peacock Green

HEX

#164C5C

RGB

rgb(22, 76, 92)

HSL

hsl(194, 61%, 22%)

HSB

hsb(194, 76%, 36%)

CMYK

cmyk(76%, 17%, 0%, 64%)

Oklch

oklch(38.9% 0.061 221.6)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#207075

Lake Blue · Teal · Mint Ice

HEX

#207075

RGB

rgb(32, 112, 117)

HSL

hsl(184, 57%, 29%)

HSB

hsb(184, 73%, 46%)

CMYK

cmyk(73%, 4%, 0%, 54%)

Oklch

oklch(50.1% 0.075 201.2)

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

#56768C

Slate Blue · SlateGray · Navy Blue

HEX

#56768C

RGB

rgb(86, 118, 140)

HSL

hsl(204, 24%, 44%)

HSB

hsb(204, 39%, 55%)

CMYK

cmyk(39%, 16%, 0%, 45%)

Oklch

oklch(55.0% 0.050 238.9)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1F0F11

0F1F1D

Analogous

1F0F19

1F0F11

1F150F

Triadic

1F0F11

111F0F

0F111F

Split-Comp.

1F0F11

0F1F15

0F191F

Tetradic

1F0F11

191F0F

0F1F1D

150F1F

Contrast Matrix WCAG 2.1 Contrast

1F0F11	1B2930	164C5C	207075	56768C
—	1.2 Fail	2.0 Fail	3.2 AA Large	3.8 AA Large
1.2 Fail	—	1.6 Fail	2.6 Fail	3.1 AA Large
2.0 Fail	1.6 Fail	—	1.6 Fail	2.0 Fail
3.2 AA Large	2.6 Fail	1.6 Fail	—	1.2 Fail
3.8 AA Large	3.1 AA Large	2.0 Fail	1.2 Fail	—

White BG

18.5AAA

14.9AAA

9.4AAA

5.8AA

4.8AA

Black BG

1.1Fail

1.4Fail

2.2Fail

3.6AA Large

4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

181811

21212E

2D2E58

434374

646487

Deuteranopia

191A10

201F2E

2A2657

3E3874

626085

Tritanopia

1E1010

1C2D2D

195554

247373

588282

Achromatopsia

141414

262626

3E3E3E

595959

6F6F6F

Shades & Tints Shades & Tints

#1F0F11

Dark

Light

#1B2930

Dark

Light

#164C5C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1f0f11;
  --color-2: #1b2930;
  --color-3: #164c5c;
  --color-4: #207075;
  --color-5: #56768c;
}

SCSS

$color-1: #1f0f11;
$color-2: #1b2930;
$color-3: #164c5c;
$color-4: #207075;
$color-5: #56768c;

TAILWIND

colors: {
  'brand-1': '#1f0f11',
  'brand-2': '#1b2930',
  'brand-3': '#164c5c',
  'brand-4': '#207075',
  'brand-5': '#56768c',
}

RGB Array

[31, 15, 17], [27, 41, 48], [22, 76, 92], [32, 112, 117], [86, 118, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1F0F11, #1B2930, #164C5C, #207075, #56768C is ideal for: tech websites, dark mode UIs, game UIs. 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: #1f0f11; --color-2: #1b2930; --color-3: #164c5c; --color-4: #207075; --color-5: #56768c. 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. 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