#688F8D + #9C8D0E + #DE5D0D + #ED114F + #241C2B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#688F8D

Mineral Blue · SlateGray · Mint Ice

HEX

#688F8D

RGB

rgb(104, 143, 141)

HSL

hsl(177, 16%, 48%)

HSB

hsb(177, 27%, 56%)

CMYK

cmyk(27%, 0%, 1%, 44%)

Oklch

oklch(62.1% 0.043 192.1)

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

#9C8D0E

Autumn Sage · DarkGoldenRod · Honey Gold

HEX

#9C8D0E

RGB

rgb(156, 141, 14)

HSL

hsl(54, 84%, 33%)

HSB

hsb(54, 91%, 61%)

CMYK

cmyk(0%, 10%, 91%, 39%)

Oklch

oklch(63.7% 0.130 101.6)

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

#DE5D0D

Tangerine · Chocolate · Amber Brown

HEX

#DE5D0D

RGB

rgb(222, 93, 13)

HSL

hsl(23, 89%, 46%)

HSB

hsb(23, 94%, 87%)

CMYK

cmyk(0%, 58%, 94%, 13%)

Oklch

oklch(63.4% 0.179 44.5)

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

#ED114F

Dark Violet · Crimson · Camellia

HEX

#ED114F

RGB

rgb(237, 17, 79)

HSL

hsl(343, 87%, 50%)

HSB

hsb(343, 93%, 93%)

CMYK

cmyk(0%, 93%, 67%, 7%)

Oklch

oklch(60.5% 0.236 15.9)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#241C2B

Dark Plum · Black · Dark Purple

HEX

#241C2B

RGB

rgb(36, 28, 43)

HSL

hsl(272, 21%, 14%)

HSB

hsb(272, 35%, 17%)

CMYK

cmyk(16%, 35%, 0%, 83%)

Oklch

oklch(24.3% 0.030 308.5)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

688F8D

8E6769

Analogous

678E78

688F8D

677C8E

Triadic

688F8D

8C678E

8E8C67

Split-Comp.

688F8D

8E677C

8E7867

Tetradic

688F8D

78678E

8E6769

7C8E67

Contrast Matrix WCAG 2.1 Contrast

688F8D	9C8D0E	DE5D0D	ED114F	241C2B
—	1.1 Fail	1.0 Fail	1.2 Fail	4.6 AA
1.1 Fail	—	1.1 Fail	1.3 Fail	4.9 AA
1.0 Fail	1.1 Fail	—	1.2 Fail	4.4 AA Large
1.2 Fail	1.3 Fail	1.2 Fail	—	3.8 AA Large
4.6 AA	4.9 AA	4.4 AA Large	3.8 AA Large	—

White BG

3.6AA Large

3.4AA Large

3.7AA Large

4.4AA Large

16.5AAA

Black BG

5.9AA

6.2AA

5.7AA

4.8AA

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

79798D

96952D

A6A520

8E8C40

212027

Deuteranopia

77748E

969834

AEB725

9BAB3C

212227

Tritanopia

6A8E8E

9B454A

D83033

E23432

242524

Achromatopsia

838383

7A7A7A

5A5A5A

202020

Shades & Tints Shades & Tints

#688F8D

Dark

Light

#9C8D0E

Dark

Light

#DE5D0D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #688f8d;
  --color-2: #9c8d0e;
  --color-3: #de5d0d;
  --color-4: #ed114f;
  --color-5: #241c2b;
}

SCSS

$color-1: #688f8d;
$color-2: #9c8d0e;
$color-3: #de5d0d;
$color-4: #ed114f;
$color-5: #241c2b;

TAILWIND

colors: {
  'brand-1': '#688f8d',
  'brand-2': '#9c8d0e',
  'brand-3': '#de5d0d',
  'brand-4': '#ed114f',
  'brand-5': '#241c2b',
}

RGB Array

[104, 143, 141], [156, 141, 14], [222, 93, 13], [237, 17, 79], [36, 28, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #688F8D, #9C8D0E, #DE5D0D, #ED114F, #241C2B 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: #688f8d; --color-2: #9c8d0e; --color-3: #de5d0d; --color-4: #ed114f; --color-5: #241c2b. 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