← Back to Editor

#40BFFE · #4792B8 · #53636B · #4B413E · #251C19

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 LibraryData Visualization

Color Details Color Details

#40BFFE

Sky Blue · MediumTurquoise · Cobalt Blue

HEX
#40BFFE
RGB
rgb(64, 191, 254)
HSL
hsl(200, 99%, 62%)
HSB
hsb(200, 75%, 100%)
CMYK
cmyk(75%, 25%, 0%, 0%)
Oklch
oklch(76.3% 0.141 235.0)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#4792B8

Slate Blue · SteelBlue · Navy Blue

HEX
#4792B8
RGB
rgb(71, 146, 184)
HSL
hsl(200, 44%, 50%)
HSB
hsb(200, 61%, 72%)
CMYK
cmyk(61%, 21%, 0%, 28%)
Oklch
oklch(62.8% 0.094 233.1)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#53636B

Slate Blue · DimGray · Prussian Blue

HEX
#53636B
RGB
rgb(83, 99, 107)
HSL
hsl(200, 13%, 37%)
HSB
hsb(200, 22%, 42%)
CMYK
cmyk(22%, 7%, 0%, 58%)
Oklch
oklch(48.9% 0.023 229.5)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#4B413E

Crimson · DarkSlateGray · Charcoal

HEX
#4B413E
RGB
rgb(75, 65, 62)
HSL
hsl(14, 9%, 27%)
HSB
hsb(14, 17%, 29%)
CMYK
cmyk(0%, 13%, 17%, 71%)
Oklch
oklch(38.5% 0.015 37.4)

Traditional「Crimson」· Paint「Charcoal」· Creative Midnight Shadow

#251C19

Tangerine · Black · Cinnamon

HEX
#251C19
RGB
rgb(37, 28, 25)
HSL
hsl(15, 19%, 12%)
HSB
hsb(15, 32%, 15%)
CMYK
cmyk(0%, 24%, 32%, 85%)
Oklch
oklch(23.6% 0.015 39.3)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

40BFFE
FE7E3E

Analogous

3EFEDE
40BFFE
3E5EFE

Triadic

40BFFE
FE3EBE
BEFE3E

Split-Comp.

40BFFE
FE3E5E
FEDE3E

Tetradic

40BFFE
DE3EFE
FE7E3E
5EFE3E

Contrast Matrix WCAG 2.1 Contrast

40BFFE
4792B8
53636B
4B413E
251C19
—
1.7
Fail
3.0
AA Large
4.8
AA
8.0
AAA
1.7
Fail
—
1.8
Fail
2.9
Fail
4.8
AA
3.0
AA Large
1.8
Fail
—
1.6
Fail
2.7
Fail
4.8
AA
2.9
Fail
1.6
Fail
—
1.7
Fail
8.0
AAA
4.8
AA
2.7
Fail
1.7
Fail
—
White BG
2.1Fail
3.5AA Large
6.2AA
9.9AAA
16.7AAA
Black BG
10.1AAA
6.1AA
3.4AA Large
2.1Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7778EF
6768AF
5A5A69
47473F
21211A

Deuteranopia

7066EB
635EAD
595869
47483F
22221A

Tritanopia

46E3E0
4BA8A6
546867
4B3F3F
251A1A

Achromatopsia

A0A0A0
808080
5F5F5F
444444
1E1E1E

Shades & Tints Shades & Tints

#40BFFE

Dark
Light

#4792B8

Dark
Light

#53636B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #40bffe;
  --color-2: #4792b8;
  --color-3: #53636b;
  --color-4: #4b413e;
  --color-5: #251c19;
}

SCSS

$color-1: #40bffe;
$color-2: #4792b8;
$color-3: #53636b;
$color-4: #4b413e;
$color-5: #251c19;

TAILWIND

colors: {
  'brand-1': '#40bffe',
  'brand-2': '#4792b8',
  'brand-3': '#53636b',
  'brand-4': '#4b413e',
  'brand-5': '#251c19',
}

RGB Array

[64, 191, 254], [71, 146, 184], [83, 99, 107], [75, 65, 62], [37, 28, 25]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #40BFFE, #4792B8, #53636B, #4B413E, #251C19 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #40bffe; --color-2: #4792b8; --color-3: #53636b; --color-4: #4b413e; --color-5: #251c19. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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