#C17D40 + #358F8F + #23767A + #1F4F63 + #283442 · space - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#C17D40

Tangerine · Chocolate · Amber Brown

HEX

#C17D40

RGB

rgb(193, 125, 64)

HSL

hsl(28, 51%, 50%)

HSB

hsb(28, 67%, 76%)

CMYK

cmyk(0%, 35%, 67%, 24%)

Oklch

oklch(64.9% 0.114 60.4)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#358F8F

Slate Blue · SteelBlue · Mint Ice

HEX

#358F8F

RGB

rgb(53, 143, 143)

HSL

hsl(180, 46%, 38%)

HSB

hsb(180, 63%, 56%)

CMYK

cmyk(63%, 0%, 0%, 44%)

Oklch

oklch(59.7% 0.084 195.1)

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

#23767A

Lake Blue · Teal · Mint Ice

HEX

#23767A

RGB

rgb(35, 118, 122)

HSL

hsl(183, 55%, 31%)

HSB

hsb(183, 71%, 48%)

CMYK

cmyk(71%, 3%, 0%, 52%)

Oklch

oklch(51.9% 0.077 199.7)

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

#1F4F63

Lake Blue · DarkSlateGray · Peacock Green

HEX

#1F4F63

RGB

rgb(31, 79, 99)

HSL

hsl(198, 52%, 25%)

HSB

hsb(198, 69%, 39%)

CMYK

cmyk(69%, 20%, 0%, 61%)

Oklch

oklch(40.4% 0.061 228.6)

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

#283442

Indigo · DarkSlateGray · Prussian Blue

HEX

#283442

RGB

rgb(40, 52, 66)

HSL

hsl(212, 25%, 21%)

HSB

hsb(212, 39%, 26%)

CMYK

cmyk(39%, 21%, 0%, 74%)

Oklch

oklch(32.0% 0.030 252.6)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C17D40

3E84C1

Analogous

C13E43

C17D40

C1BC3E

Triadic

C17D40

3EC17B

7B3EC1

Split-Comp.

C17D40

3EC1BC

3E43C1

Tetradic

C17D40

43C13E

3E84C1

BC3EC1

Contrast Matrix WCAG 2.1 Contrast

C17D40	358F8F	23767A	1F4F63	283442
—	1.1 Fail	1.6 Fail	2.7 Fail	3.8 AA Large
1.1 Fail	—	1.4 Fail	2.3 Fail	3.3 AA Large
1.6 Fail	1.4 Fail	—	1.7 Fail	2.4 Fail
2.7 Fail	2.3 Fail	1.7 Fail	—	1.4 Fail
3.8 AA Large	3.3 AA Large	2.4 Fail	1.4 Fail	—

White BG

3.3AA Large

3.8AA Large

5.3AA

8.9AAA

12.6AAA

Black BG

6.3AA

5.5AA

3.9AA Large

2.4Fail

1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A4A34F

5C5D8F

474879

34345E

2D2D3F

Deuteranopia

A8AD52

57508F

423C79

312D5D

2D2C3E

Tritanopia

BE5A5D

398F8F

277878

215A5A

293C3B

Achromatopsia

8A8A8A

747474

5E5E5E

434343

323232

Shades & Tints Shades & Tints

#C17D40

Dark

Light

#358F8F

Dark

Light

#23767A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c17d40;
  --color-2: #358f8f;
  --color-3: #23767a;
  --color-4: #1f4f63;
  --color-5: #283442;
}

SCSS

$color-1: #c17d40;
$color-2: #358f8f;
$color-3: #23767a;
$color-4: #1f4f63;
$color-5: #283442;

TAILWIND

colors: {
  'brand-1': '#c17d40',
  'brand-2': '#358f8f',
  'brand-3': '#23767a',
  'brand-4': '#1f4f63',
  'brand-5': '#283442',
}

RGB Array

[193, 125, 64], [53, 143, 143], [35, 118, 122], [31, 79, 99], [40, 52, 66]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #C17D40, #358F8F, #23767A, #1F4F63, #283442 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: #c17d40; --color-2: #358f8f; --color-3: #23767a; --color-4: #1f4f63; --color-5: #283442. 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 space-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