#0C5B77 + #616361 + #C27D2F + #89491C + #782C0C · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#0C5B77

Lake Blue · Teal · Mint Ice

HEX

#0C5B77

RGB

rgb(12, 91, 119)

HSL

hsl(196, 82%, 26%)

HSB

hsb(196, 90%, 47%)

CMYK

cmyk(90%, 24%, 0%, 53%)

Oklch

oklch(44.1% 0.083 228.8)

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

#616361

Ink Gray · DimGray · Charcoal

HEX

#616361

RGB

rgb(97, 99, 97)

HSL

hsl(120, 1%, 38%)

HSB

hsb(120, 2%, 39%)

CMYK

cmyk(2%, 0%, 2%, 61%)

Oklch

oklch(49.7% 0.004 145.5)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#C27D2F

Ochre · Chocolate · Amber Brown

HEX

#C27D2F

RGB

rgb(194, 125, 47)

HSL

hsl(32, 61%, 47%)

HSB

hsb(32, 76%, 76%)

CMYK

cmyk(0%, 36%, 76%, 24%)

Oklch

oklch(64.9% 0.125 65.1)

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

#89491C

Tangerine · Sienna · Amber Brown

HEX

#89491C

RGB

rgb(137, 73, 28)

HSL

hsl(25, 66%, 32%)

HSB

hsb(25, 80%, 54%)

CMYK

cmyk(0%, 47%, 80%, 46%)

Oklch

oklch(47.6% 0.104 52.1)

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

#782C0C

Tangerine · Maroon · Amber Brown

HEX

#782C0C

RGB

rgb(120, 44, 12)

HSL

hsl(18, 82%, 26%)

HSB

hsb(18, 90%, 47%)

CMYK

cmyk(0%, 63%, 90%, 53%)

Oklch

oklch(40.0% 0.114 40.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0C5B77

79290C

Analogous

0C795F

0C5B77

0C2579

Triadic

0C5B77

790C5C

5C790C

Split-Comp.

0C5B77

790C25

795F0C

Tetradic

0C5B77

5F0C79

79290C

25790C

Contrast Matrix WCAG 2.1 Contrast

0C5B77	616361	C27D2F	89491C	782C0C
—	1.2 Fail	2.3 Fail	1.1 Fail	1.3 Fail
1.2 Fail	—	1.8 Fail	1.1 Fail	1.6 Fail
2.3 Fail	1.8 Fail	—	2.1 Fail	2.9 Fail
1.1 Fail	1.1 Fail	2.1 Fail	—	1.4 Fail
1.3 Fail	1.6 Fail	2.9 Fail	1.4 Fail	—

White BG

7.6AAA

6.1AA

3.4AA Large

6.9AA

9.7AAA

Black BG

2.8Fail

3.5AA Large

6.3AA

3.0AA Large

2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2F70

626261

A4A442

6D6D27

575614

Deuteranopia

2A246F

626262

A8AD46

71762A

5C6116

Tritanopia

106B6A

616262

BF5154

862F31

741A1B

Achromatopsia

474747

626262

898989

575757

3F3F3F

Shades & Tints Shades & Tints

#0C5B77

Dark

Light

#616361

Dark

Light

#C27D2F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0c5b77;
  --color-2: #616361;
  --color-3: #c27d2f;
  --color-4: #89491c;
  --color-5: #782c0c;
}

SCSS

$color-1: #0c5b77;
$color-2: #616361;
$color-3: #c27d2f;
$color-4: #89491c;
$color-5: #782c0c;

TAILWIND

colors: {
  'brand-1': '#0c5b77',
  'brand-2': '#616361',
  'brand-3': '#c27d2f',
  'brand-4': '#89491c',
  'brand-5': '#782c0c',
}

RGB Array

[12, 91, 119], [97, 99, 97], [194, 125, 47], [137, 73, 28], [120, 44, 12]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #0C5B77, #616361, #C27D2F, #89491C, #782C0C 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: #0c5b77; --color-2: #616361; --color-3: #c27d2f; --color-4: #89491c; --color-5: #782c0c. 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 warm-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