← Back to Editor

#63D4C8 · #AFB83D · #D950D0 · #FF3675 · #212A38

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

#63D4C8

Jade · MediumTurquoise · Lake Green

HEX
#63D4C8
RGB
rgb(99, 212, 200)
HSL
hsl(174, 57%, 61%)
HSB
hsb(174, 53%, 83%)
CMYK
cmyk(53%, 0%, 6%, 17%)
Oklch
oklch(80.1% 0.105 186.0)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#AFB83D

Autumn Sage · GoldenRod · Honey Gold

HEX
#AFB83D
RGB
rgb(175, 184, 61)
HSL
hsl(64, 50%, 48%)
HSB
hsb(64, 67%, 72%)
CMYK
cmyk(5%, 0%, 67%, 28%)
Oklch
oklch(75.3% 0.144 113.4)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#D950D0

Rose Purple · MediumOrchid · Violet

HEX
#D950D0
RGB
rgb(217, 80, 208)
HSL
hsl(304, 64%, 58%)
HSB
hsb(304, 63%, 85%)
CMYK
cmyk(0%, 63%, 4%, 15%)
Oklch
oklch(65.9% 0.223 330.5)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#FF3675

Rouge · DeepPink · Rose Pink

HEX
#FF3675
RGB
rgb(255, 54, 117)
HSL
hsl(341, 100%, 61%)
HSB
hsb(341, 79%, 100%)
CMYK
cmyk(0%, 79%, 54%, 0%)
Oklch
oklch(66.2% 0.234 8.7)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#212A38

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#212A38
RGB
rgb(33, 42, 56)
HSL
hsl(217, 26%, 17%)
HSB
hsb(217, 41%, 22%)
CMYK
cmyk(41%, 25%, 0%, 78%)
Oklch
oklch(28.3% 0.029 259.1)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

63D4C8
D4636E

Analogous

63D490
63D4C8
63A7D4

Triadic

63D4C8
C963D4
D4C963

Split-Comp.

63D4C8
D463A7
D49063

Tetradic

63D4C8
9063D4
D4636E
A7D463

Contrast Matrix WCAG 2.1 Contrast

63D4C8
AFB83D
D950D0
FF3675
212A38
—
1.2
Fail
2.0
Fail
2.0
Fail
8.1
AAA
1.2
Fail
—
1.6
Fail
1.6
Fail
6.7
AA
2.0
Fail
1.6
Fail
—
1.0
Fail
4.1
AA Large
2.0
Fail
1.6
Fail
1.0
Fail
—
4.2
AA Large
8.1
AAA
6.7
AA
4.1
AA Large
4.2
AA Large
—
White BG
1.8Fail
2.2Fail
3.5AA Large
3.5AA Large
14.5AAA
Black BG
11.8AAA
9.7AAA
6.0AA
6.0AA
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9495CB
B3B35B
9E9CB1
A8A666
252535

Deuteranopia

8D85CC
B2B262
A6B0AA
B4C362
242434

Tritanopia

69CDCE
AF7277
D29993
F55A57
213231

Achromatopsia

B1B1B1
A7A7A7
888888
797979
292929

Shades & Tints Shades & Tints

#63D4C8

Dark
Light

#AFB83D

Dark
Light

#D950D0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #63d4c8;
  --color-2: #afb83d;
  --color-3: #d950d0;
  --color-4: #ff3675;
  --color-5: #212a38;
}

SCSS

$color-1: #63d4c8;
$color-2: #afb83d;
$color-3: #d950d0;
$color-4: #ff3675;
$color-5: #212a38;

TAILWIND

colors: {
  'brand-1': '#63d4c8',
  'brand-2': '#afb83d',
  'brand-3': '#d950d0',
  'brand-4': '#ff3675',
  'brand-5': '#212a38',
}

RGB Array

[99, 212, 200], [175, 184, 61], [217, 80, 208], [255, 54, 117], [33, 42, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #63D4C8, #AFB83D, #D950D0, #FF3675, #212A38 is ideal for: 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: #63d4c8; --color-2: #afb83d; --color-3: #d950d0; --color-4: #ff3675; --color-5: #212a38. 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. 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