#171717 + #272B36 + #0D4457 + #22544C + #695F35 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#171717

Ink Black · Black · Jet Black

HEX

#171717

RGB

rgb(23, 23, 23)

HSL

hsl(0, 0%, 9%)

HSB

hsb(0, 0%, 9%)

CMYK

cmyk(0%, 0%, 0%, 91%)

Oklch

oklch(20.5% 0.000 89.9)

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

#272B36

Indigo · DarkSlateGray · Deep Sea Blue

HEX

#272B36

RGB

rgb(39, 43, 54)

HSL

hsl(224, 16%, 18%)

HSB

hsb(224, 28%, 21%)

CMYK

cmyk(28%, 20%, 0%, 79%)

Oklch

oklch(29.0% 0.021 269.4)

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

#0D4457

Lake Blue · DarkSlateGray · Peacock Green

HEX

#0D4457

RGB

rgb(13, 68, 87)

HSL

hsl(195, 74%, 20%)

HSB

hsb(195, 85%, 34%)

CMYK

cmyk(85%, 22%, 0%, 66%)

Oklch

oklch(36.2% 0.063 226.5)

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

#22544C

Mineral Blue · DarkSlateGray · Peacock Green

HEX

#22544C

RGB

rgb(34, 84, 76)

HSL

hsl(170, 42%, 23%)

HSB

hsb(170, 60%, 33%)

CMYK

cmyk(60%, 0%, 10%, 67%)

Oklch

oklch(40.9% 0.056 181.4)

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

#695F35

Ochre · DarkOliveGreen · Honey Gold

HEX

#695F35

RGB

rgb(105, 95, 53)

HSL

hsl(48, 33%, 31%)

HSB

hsb(48, 50%, 41%)

CMYK

cmyk(0%, 10%, 50%, 59%)

Oklch

oklch(48.5% 0.061 96.3)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

171717

Analogous

171717

Triadic

171717

Split-Comp.

171717

Tetradic

171717

Contrast Matrix WCAG 2.1 Contrast

171717	272B36	0D4457	22544C	695F35
—	1.3 Fail	1.7 Fail	2.1 Fail	2.8 Fail
1.3 Fail	—	1.3 Fail	1.6 Fail	2.2 Fail
1.7 Fail	1.3 Fail	—	1.2 Fail	1.7 Fail
2.1 Fail	1.6 Fail	1.2 Fail	—	1.3 Fail
2.8 Fail	2.2 Fail	1.7 Fail	1.3 Fail	—

White BG

17.9AAA

14.1AAA

10.6AAA

8.6AAA

6.4AA

Black BG

1.2Fail

1.5Fail

2.0Fail

2.4Fail

3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

171717

292933

252552

38384E

65653F

Deuteranopia

171717

292833

221E51

35314E

656642

Tritanopia

171717

273131

104F4E

254F50

694749

Achromatopsia

171717

2B2B2B

363636

444444

5D5D5D

Shades & Tints Shades & Tints

#171717

Dark

Light

#272B36

Dark

Light

#0D4457

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #171717;
  --color-2: #272b36;
  --color-3: #0d4457;
  --color-4: #22544c;
  --color-5: #695f35;
}

SCSS

$color-1: #171717;
$color-2: #272b36;
$color-3: #0d4457;
$color-4: #22544c;
$color-5: #695f35;

TAILWIND

colors: {
  'brand-1': '#171717',
  'brand-2': '#272b36',
  'brand-3': '#0d4457',
  'brand-4': '#22544c',
  'brand-5': '#695f35',
}

RGB Array

[23, 23, 23], [39, 43, 54], [13, 68, 87], [34, 84, 76], [105, 95, 53]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #171717, #272B36, #0D4457, #22544C, #695F35 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: #171717; --color-2: #272b36; --color-3: #0d4457; --color-4: #22544c; --color-5: #695f35. 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 sea-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