← Back to Editor

#F5D769 · #52A295 · #319688 · #33616E · #1B2E2C

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

#F5D769

Ginger · Khaki · Sunflower

HEX
#F5D769
RGB
rgb(245, 215, 105)
HSL
hsl(47, 88%, 69%)
HSB
hsb(47, 57%, 96%)
CMYK
cmyk(0%, 12%, 57%, 4%)
Oklch
oklch(88.3% 0.133 94.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#52A295

Mineral Blue · CadetBlue · Mint Ice

HEX
#52A295
RGB
rgb(82, 162, 149)
HSL
hsl(170, 33%, 48%)
HSB
hsb(170, 49%, 64%)
CMYK
cmyk(49%, 0%, 8%, 36%)
Oklch
oklch(65.8% 0.082 181.8)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#319688

Mineral Blue · MediumSeaGreen · Mint Ice

HEX
#319688
RGB
rgb(49, 150, 136)
HSL
hsl(172, 51%, 39%)
HSB
hsb(172, 67%, 59%)
CMYK
cmyk(67%, 0%, 9%, 41%)
Oklch
oklch(61.2% 0.094 182.1)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#33616E

Slate Blue · DarkSlateGray · Mint Ice

HEX
#33616E
RGB
rgb(51, 97, 110)
HSL
hsl(193, 37%, 32%)
HSB
hsb(193, 54%, 43%)
CMYK
cmyk(54%, 12%, 0%, 57%)
Oklch
oklch(46.5% 0.055 218.3)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#1B2E2C

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#1B2E2C
RGB
rgb(27, 46, 44)
HSL
hsl(174, 26%, 14%)
HSB
hsb(174, 41%, 18%)
CMYK
cmyk(41%, 0%, 4%, 82%)
Oklch
oklch(28.4% 0.025 187.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5D769
6A89F6

Analogous

F6926A
F5D769
CEF66A

Triadic

F5D769
6AF6D7
D76AF6

Split-Comp.

F5D769
6ACEF6
926AF6

Tetradic

F5D769
6AF692
6A89F6
F66ACE

Contrast Matrix WCAG 2.1 Contrast

F5D769
52A295
319688
33616E
1B2E2C
—
2.1
Fail
2.5
Fail
4.8
AA
10.0
AAA
2.1
Fail
—
1.2
Fail
2.3
Fail
4.7
AA
2.5
Fail
1.2
Fail
—
1.9
Fail
4.0
AA Large
4.8
AA
2.3
Fail
1.9
Fail
—
2.1
Fail
10.0
AAA
4.7
AA
4.0
AA Large
2.1
Fail
—
White BG
1.4Fail
3.0AA Large
3.6AA Large
6.8AA
14.2AAA
Black BG
14.8AAA
7.0AA
5.8AA
3.1AA Large
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E8E884
757598
5D5E8B
47476B
23232C

Deuteranopia

EAEC8A
706A99
574F8C
44416A
22212D

Tritanopia

F4999D
569B9B
368E8F
356868
1C2D2D

Achromatopsia

D3D3D3
898989
767676
555555
282828

Shades & Tints Shades & Tints

#F5D769

Dark
Light

#52A295

Dark
Light

#319688

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5d769;
  --color-2: #52a295;
  --color-3: #319688;
  --color-4: #33616e;
  --color-5: #1b2e2c;
}

SCSS

$color-1: #f5d769;
$color-2: #52a295;
$color-3: #319688;
$color-4: #33616e;
$color-5: #1b2e2c;

TAILWIND

colors: {
  'brand-1': '#f5d769',
  'brand-2': '#52a295',
  'brand-3': '#319688',
  'brand-4': '#33616e',
  'brand-5': '#1b2e2c',
}

RGB Array

[245, 215, 105], [82, 162, 149], [49, 150, 136], [51, 97, 110], [27, 46, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5D769, #52A295, #319688, #33616E, #1B2E2C 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: #f5d769; --color-2: #52a295; --color-3: #319688; --color-4: #33616e; --color-5: #1b2e2c. 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