← Back to Editor

#444400 · #444433 · #444466 · #444499 · #4444CC

cool

A 5-color cool palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#444400

Autumn Sage · DarkOliveGreen · Amber Gold

HEX
#444400
RGB
rgb(68, 68, 0)
HSL
hsl(60, 100%, 13%)
HSB
hsb(60, 100%, 27%)
CMYK
cmyk(0%, 0%, 100%, 73%)
Oklch
oklch(37.4% 0.082 109.8)

TraditionalAutumn Sage」· PaintAmber Gold」· Creative Blush Sunrise

#444433

Autumn Sage · DarkSlateGray · Amber Gold

HEX
#444433
RGB
rgb(68, 68, 51)
HSL
hsl(60, 14%, 23%)
HSB
hsb(60, 25%, 27%)
CMYK
cmyk(0%, 0%, 25%, 73%)
Oklch
oklch(38.1% 0.028 107.6)

TraditionalAutumn Sage」· PaintAmber Gold」· Creative Blush Sunrise

#444466

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#444466
RGB
rgb(68, 68, 102)
HSL
hsl(240, 20%, 33%)
HSB
hsb(240, 33%, 40%)
CMYK
cmyk(33%, 33%, 0%, 60%)
Oklch
oklch(40.2% 0.057 283.5)

TraditionalDeep Indigo」· PaintPrussian Blue」· Creative Blush Sunrise

#444499

Deep Indigo · DarkSlateBlue · Navy Blue

HEX
#444499
RGB
rgb(68, 68, 153)
HSL
hsl(240, 38%, 43%)
HSB
hsb(240, 56%, 60%)
CMYK
cmyk(56%, 56%, 0%, 40%)
Oklch
oklch(43.5% 0.135 279.2)

TraditionalDeep Indigo」· PaintNavy Blue」· Creative Blush Sunrise

#4444CC

Deep Indigo · SlateBlue · Navy Blue

HEX
#4444CC
RGB
rgb(68, 68, 204)
HSL
hsl(240, 57%, 53%)
HSB
hsb(240, 67%, 80%)
CMYK
cmyk(67%, 67%, 0%, 20%)
Oklch
oklch(47.7% 0.204 275.4)

TraditionalDeep Indigo」· PaintNavy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

444400
000042

Analogous

422100
444400
214200

Triadic

444400
004242
420042

Split-Comp.

444400
002142
210042

Tetradic

444400
004221
000042
420021

Contrast Matrix WCAG 2.1 Contrast

444400
444433
444466
444499
4444CC
1.0
Fail
1.1
Fail
1.2
Fail
1.4
Fail
1.0
Fail
1.1
Fail
1.2
Fail
1.4
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.3
Fail
1.2
Fail
1.2
Fail
1.1
Fail
1.2
Fail
1.4
Fail
1.4
Fail
1.3
Fail
1.2
Fail
White BG
10.1AAA
9.9AAA
9.3AAA
8.3AAA
7.1AAA
Black BG
2.1Fail
2.1Fail
2.3Fail
2.5Fail
2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

444410
444437
44445E
444484
4444AB

Deuteranopia

444414
444438
44445C
444480
4444A3

Tritanopia

441D20
443A3B
445756
447471
44918B

Achromatopsia

3C3C3C
424242
484848
4E4E4E
545454

Shades & Tints Shades & Tints

#444400

Dark
Light

#444433

Dark
Light

#444466

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #444400;
  --color-2: #444433;
  --color-3: #444466;
  --color-4: #444499;
  --color-5: #4444cc;
}

SCSS

$color-1: #444400;
$color-2: #444433;
$color-3: #444466;
$color-4: #444499;
$color-5: #4444cc;

TAILWIND

colors: {
  'brand-1': '#444400',
  'brand-2': '#444433',
  'brand-3': '#444466',
  'brand-4': '#444499',
  'brand-5': '#4444cc',
}

RGB Array

[68, 68, 0], [68, 68, 51], [68, 68, 102], [68, 68, 153], [68, 68, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #444400, #444433, #444466, #444499, #4444CC 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: #444400; --color-2: #444433; --color-3: #444466; --color-4: #444499; --color-5: #4444cc. 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 cool-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