← Back to Editor

#243B45 · #C44949 · #C46849 · #C48649 · #C4A549

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#243B45

Slate Blue · DarkSlateGray · Peacock Green

HEX
#243B45
RGB
rgb(36, 59, 69)
HSL
hsl(198, 31%, 21%)
HSB
hsb(198, 48%, 27%)
CMYK
cmyk(48%, 14%, 0%, 73%)
Oklch
oklch(33.8% 0.034 227.2)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#C44949

Crimson · Sienna · Passion Red

HEX
#C44949
RGB
rgb(196, 73, 73)
HSL
hsl(0, 51%, 53%)
HSB
hsb(0, 63%, 77%)
CMYK
cmyk(0%, 63%, 63%, 23%)
Oklch
oklch(57.3% 0.158 23.5)

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

#C46849

Tangerine · Chocolate · Warm Sun

HEX
#C46849
RGB
rgb(196, 104, 73)
HSL
hsl(15, 51%, 53%)
HSB
hsb(15, 63%, 77%)
CMYK
cmyk(0%, 47%, 63%, 23%)
Oklch
oklch(61.8% 0.126 39.2)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#C48649

Ginger · Chocolate · Warm Sun

HEX
#C48649
RGB
rgb(196, 134, 73)
HSL
hsl(30, 51%, 53%)
HSB
hsb(30, 63%, 77%)
CMYK
cmyk(0%, 32%, 63%, 23%)
Oklch
oklch(67.0% 0.109 63.6)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#C4A549

Ginger · GoldenRod · Sunflower

HEX
#C4A549
RGB
rgb(196, 165, 73)
HSL
hsl(45, 51%, 53%)
HSB
hsb(45, 63%, 77%)
CMYK
cmyk(0%, 16%, 63%, 23%)
Oklch
oklch(73.2% 0.116 90.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

243B45
462F25

Analogous

254640
243B45
252C46

Triadic

243B45
46253C
3C4625

Split-Comp.

243B45
46252C
464025

Tetradic

243B45
402546
462F25
2C4625

Contrast Matrix WCAG 2.1 Contrast

243B45
C44949
C46849
C48649
C4A549
—
2.5
Fail
3.0
AA Large
3.8
AA Large
4.9
AA
2.5
Fail
—
1.2
Fail
1.6
Fail
2.0
Fail
3.0
AA Large
1.2
Fail
—
1.3
Fail
1.6
Fail
3.8
AA Large
1.6
Fail
1.3
Fail
—
1.3
Fail
4.9
AA
2.0
Fail
1.6
Fail
1.3
Fail
—
White BG
11.8AAA
4.8AA
3.9AA Large
3.1AA Large
2.4Fail
Black BG
1.8Fail
4.4AA Large
5.4AA
6.9AA
8.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2E43
8F8E49
9C9B51
A9A958
B7B65F

Deuteranopia

2D2B42
969F49
A2A852
ADB15B
B8BB65

Tritanopia

254140
BE4949
BF5658
C16366
C27175

Achromatopsia

353535
6E6E6E
808080
929292
A4A4A4

Shades & Tints Shades & Tints

#243B45

Dark
Light

#C44949

Dark
Light

#C46849

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #243b45;
  --color-2: #c44949;
  --color-3: #c46849;
  --color-4: #c48649;
  --color-5: #c4a549;
}

SCSS

$color-1: #243b45;
$color-2: #c44949;
$color-3: #c46849;
$color-4: #c48649;
$color-5: #c4a549;

TAILWIND

colors: {
  'brand-1': '#243b45',
  'brand-2': '#c44949',
  'brand-3': '#c46849',
  'brand-4': '#c48649',
  'brand-5': '#c4a549',
}

RGB Array

[36, 59, 69], [196, 73, 73], [196, 104, 73], [196, 134, 73], [196, 165, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #243B45, #C44949, #C46849, #C48649, #C4A549 is ideal for: corporate websites, product showcases, portfolios. 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: #243b45; --color-2: #c44949; --color-3: #c46849; --color-4: #c48649; --color-5: #c4a549. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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