← Back to Editor

#423636 · #A7244A · #FA3440 · #FB6442 · #67786D

bright

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#423636

Crimson · DarkSlateGray · Wine Red

HEX
#423636
RGB
rgb(66, 54, 54)
HSL
hsl(0, 10%, 24%)
HSB
hsb(0, 18%, 26%)
CMYK
cmyk(0%, 18%, 18%, 74%)
Oklch
oklch(34.6% 0.017 18.0)

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

#A7244A

Dark Violet · Brown · Camellia

HEX
#A7244A
RGB
rgb(167, 36, 74)
HSL
hsl(343, 65%, 40%)
HSB
hsb(343, 78%, 65%)
CMYK
cmyk(0%, 78%, 56%, 35%)
Oklch
oklch(48.5% 0.167 9.5)

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

#FA3440

Vermilion · Crimson · Passion Red

HEX
#FA3440
RGB
rgb(250, 52, 64)
HSL
hsl(356, 95%, 59%)
HSB
hsb(356, 79%, 98%)
CMYK
cmyk(0%, 79%, 74%, 2%)
Oklch
oklch(64.2% 0.231 24.1)

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

#FB6442

Peach Pink · Tomato · Coral Red

HEX
#FB6442
RGB
rgb(251, 100, 66)
HSL
hsl(11, 96%, 62%)
HSB
hsb(11, 74%, 98%)
CMYK
cmyk(0%, 60%, 74%, 2%)
Oklch
oklch(69.1% 0.192 34.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#67786D

Celadon · DimGray · Warm Gray

HEX
#67786D
RGB
rgb(103, 120, 109)
HSL
hsl(141, 8%, 44%)
HSB
hsb(141, 14%, 47%)
CMYK
cmyk(14%, 0%, 9%, 53%)
Oklch
oklch(55.5% 0.026 157.1)

Traditional「Celadon」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

423636
374343

Analogous

43373D
423636
433D37

Triadic

423636
374337
373743

Split-Comp.

423636
37433D
373D43

Tetradic

423636
3D4337
374343
3D3743

Contrast Matrix WCAG 2.1 Contrast

423636
A7244A
FA3440
FB6442
67786D
—
1.7
Fail
3.1
AA Large
3.9
AA Large
2.5
Fail
1.7
Fail
—
1.9
Fail
2.3
Fail
1.5
Fail
3.1
AA Large
1.9
Fail
—
1.2
Fail
1.3
Fail
3.9
AA Large
2.3
Fail
1.2
Fail
—
1.6
Fail
2.5
Fail
1.5
Fail
1.3
Fail
1.6
Fail
—
White BG
11.6AAA
7.0AAA
3.7AA Large
3.0Fail
4.7AA
Black BG
1.8Fail
3.0Fail
5.6AA
7.0AAA
4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

3D3D36
6E6D41
A4A23D
BAB84A
6E6F70

Deuteranopia

3E3E36
76803F
B0BF3C
C2CE4C
6D6C70

Tritanopia

413636
A03A38
F03B3A
F35152
687272

Achromatopsia

3A3A3A
505050
717171
8D8D8D
727272

Shades & Tints Shades & Tints

#423636

Dark
Light

#A7244A

Dark
Light

#FA3440

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #423636;
  --color-2: #a7244a;
  --color-3: #fa3440;
  --color-4: #fb6442;
  --color-5: #67786d;
}

SCSS

$color-1: #423636;
$color-2: #a7244a;
$color-3: #fa3440;
$color-4: #fb6442;
$color-5: #67786d;

TAILWIND

colors: {
  'brand-1': '#423636',
  'brand-2': '#a7244a',
  'brand-3': '#fa3440',
  'brand-4': '#fb6442',
  'brand-5': '#67786d',
}

RGB Array

[66, 54, 54], [167, 36, 74], [250, 52, 64], [251, 100, 66], [103, 120, 109]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This bright-style palette of #423636, #A7244A, #FA3440, #FB6442, #67786D 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: #423636; --color-2: #a7244a; --color-3: #fa3440; --color-4: #fb6442; --color-5: #67786d. 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 bright-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