#DDF719 + #9BA174 + #54474D + #362F32 + #960037 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DDF719

Autumn Sage · Yellow · Sunflower

HEX

#DDF719

RGB

rgb(221, 247, 25)

HSL

hsl(67, 93%, 53%)

HSB

hsb(67, 90%, 97%)

CMYK

cmyk(11%, 0%, 90%, 3%)

Oklch

oklch(92.5% 0.210 117.3)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#9BA174

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#9BA174

RGB

rgb(155, 161, 116)

HSL

hsl(68, 19%, 54%)

HSB

hsb(68, 28%, 63%)

CMYK

cmyk(4%, 0%, 28%, 37%)

Oklch

oklch(69.3% 0.063 114.2)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#54474D

Dark Violet · DarkSlateGray · Charcoal

HEX

#54474D

RGB

rgb(84, 71, 77)

HSL

hsl(332, 8%, 30%)

HSB

hsb(332, 15%, 33%)

CMYK

cmyk(0%, 15%, 8%, 67%)

Oklch

oklch(41.3% 0.020 348.4)

Traditional「Dark Violet」· Paint「Charcoal」· Creative Midnight Shadow

#362F32

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#362F32

RGB

rgb(54, 47, 50)

HSL

hsl(334, 7%, 20%)

HSB

hsb(334, 13%, 21%)

CMYK

cmyk(0%, 13%, 7%, 79%)

Oklch

oklch(31.4% 0.011 350.0)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#960037

Dark Violet · Brown · Camellia

HEX

#960037

RGB

rgb(150, 0, 55)

HSL

hsl(338, 100%, 29%)

HSB

hsb(338, 100%, 59%)

CMYK

cmyk(0%, 100%, 63%, 41%)

Oklch

oklch(43.0% 0.172 11.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DDF719

3218F7

Analogous

F7A118

DDF719

6DF718

Triadic

DDF719

18DDF7

F718DD

Split-Comp.

DDF719

186DF7

A118F7

Tetradic

DDF719

18F7A1

3218F7

F7186D

Contrast Matrix WCAG 2.1 Contrast

DDF719	9BA174	54474D	362F32	960037
—	2.2 Fail	7.3 AAA	10.8 AAA	7.4 AAA
2.2 Fail	—	3.2 AA Large	4.8 AA	3.3 AA Large
7.3 AAA	3.2 AA Large	—	1.5 Fail	1.0 Fail
10.8 AAA	4.8 AA	1.5 Fail	—	1.5 Fail
7.4 AAA	3.3 AA Large	1.0 Fail	1.5 Fail	—

White BG

1.2Fail

2.7Fail

8.8AAA

13.0AAA

8.9AAA

Black BG

17.4AAA

7.7AAA

2.4Fail

1.6Fail

2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E8E84F

9E9E7F

4E4E4C

333331

55542A

Deuteranopia

E7E55C

9D9D82

4F504B

333431

5E6927

Tritanopia

DE7982

9B8789

534A4A

363131

8F1F1D

Achromatopsia

D6D6D6

9A9A9A

4C4C4C

313131

333333

Shades & Tints Shades & Tints

#DDF719

Dark

Light

#9BA174

Dark

Light

#54474D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ddf719;
  --color-2: #9ba174;
  --color-3: #54474d;
  --color-4: #362f32;
  --color-5: #960037;
}

SCSS

$color-1: #ddf719;
$color-2: #9ba174;
$color-3: #54474d;
$color-4: #362f32;
$color-5: #960037;

TAILWIND

colors: {
  'brand-1': '#ddf719',
  'brand-2': '#9ba174',
  'brand-3': '#54474d',
  'brand-4': '#362f32',
  'brand-5': '#960037',
}

RGB Array

[221, 247, 25], [155, 161, 116], [84, 71, 77], [54, 47, 50], [150, 0, 55]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DDF719, #9BA174, #54474D, #362F32, #960037 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: #ddf719; --color-2: #9ba174; --color-3: #54474d; --color-4: #362f32; --color-5: #960037. 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