#638F74 + #666534 + #66492A + #4F281F + #1F100E · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#638F74

Celadon · SlateGray · Olive Green

HEX

#638F74

RGB

rgb(99, 143, 116)

HSL

hsl(143, 18%, 47%)

HSB

hsb(143, 31%, 56%)

CMYK

cmyk(31%, 0%, 19%, 44%)

Oklch

oklch(61.0% 0.063 157.0)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#666534

Autumn Sage · DarkOliveGreen · Honey Gold

HEX

#666534

RGB

rgb(102, 101, 52)

HSL

hsl(59, 32%, 30%)

HSB

hsb(59, 49%, 40%)

CMYK

cmyk(0%, 1%, 49%, 60%)

Oklch

oklch(49.6% 0.070 107.6)

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

#66492A

Ochre · DarkOliveGreen · Amber Brown

HEX

#66492A

RGB

rgb(102, 73, 42)

HSL

hsl(31, 42%, 28%)

HSB

hsb(31, 59%, 40%)

CMYK

cmyk(0%, 28%, 59%, 60%)

Oklch

oklch(43.0% 0.060 66.9)

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

#4F281F

Crimson · DarkOliveGreen · Wine Red

HEX

#4F281F

RGB

rgb(79, 40, 31)

HSL

hsl(11, 44%, 22%)

HSB

hsb(11, 61%, 31%)

CMYK

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

Oklch

oklch(32.7% 0.061 34.0)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#1F100E

Crimson · Black · Deep Berry

HEX

#1F100E

RGB

rgb(31, 16, 14)

HSL

hsl(7, 38%, 9%)

HSB

hsb(7, 55%, 12%)

CMYK

cmyk(0%, 48%, 55%, 88%)

Oklch

oklch(19.4% 0.026 28.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

638F74

8D627D

Analogous

678D62

638F74

628D88

Triadic

638F74

73628D

8D7362

Split-Comp.

638F74

88628D

8D6267

Tetradic

638F74

62678D

8D627D

8D8862

Contrast Matrix WCAG 2.1 Contrast

638F74	666534	66492A	4F281F	1F100E
—	1.6 Fail	2.2 Fail	3.4 AA Large	5.0 AA
1.6 Fail	—	1.4 Fail	2.1 Fail	3.1 AA Large
2.2 Fail	1.4 Fail	—	1.5 Fail	2.2 Fail
3.4 AA Large	2.1 Fail	1.5 Fail	—	1.5 Fail
5.0 AA	3.1 AA Large	2.2 Fail	1.5 Fail	—

White BG

3.7AA Large

6.0AA

8.2AAA

12.7AAA

18.4AAA

Black BG

5.7AA

3.5AA Large

2.6Fail

1.7Fail

1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

76767B

666640

595932

3E3E21

19180E

Deuteranopia

74707C

666643

5B5D33

404322

191B0F

Tritanopia

658081

66494B

653739

4D2323

1E0F0F

Achromatopsia

7F7F7F

606060

4E4E4E

333333

141414

Shades & Tints Shades & Tints

#638F74

Dark

Light

#666534

Dark

Light

#66492A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #638f74;
  --color-2: #666534;
  --color-3: #66492a;
  --color-4: #4f281f;
  --color-5: #1f100e;
}

SCSS

$color-1: #638f74;
$color-2: #666534;
$color-3: #66492a;
$color-4: #4f281f;
$color-5: #1f100e;

TAILWIND

colors: {
  'brand-1': '#638f74',
  'brand-2': '#666534',
  'brand-3': '#66492a',
  'brand-4': '#4f281f',
  'brand-5': '#1f100e',
}

RGB Array

[99, 143, 116], [102, 101, 52], [102, 73, 42], [79, 40, 31], [31, 16, 14]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #638F74, #666534, #66492A, #4F281F, #1F100E 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: #638f74; --color-2: #666534; --color-3: #66492a; --color-4: #4f281f; --color-5: #1f100e. 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