← Back to Editor

#61A7C1 · #037AA6 · #63460A · #B07500 · #EDB037

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#61A7C1

Slate Blue · CadetBlue · Lake Green

HEX
#61A7C1
RGB
rgb(97, 167, 193)
HSL
hsl(196, 44%, 57%)
HSB
hsb(196, 50%, 76%)
CMYK
cmyk(50%, 13%, 0%, 24%)
Oklch
oklch(69.2% 0.080 224.1)

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

#037AA6

Lake Blue · Teal · Mint Ice

HEX
#037AA6
RGB
rgb(3, 122, 166)
HSL
hsl(196, 96%, 33%)
HSB
hsb(196, 98%, 65%)
CMYK
cmyk(98%, 27%, 0%, 35%)
Oklch
oklch(54.5% 0.112 232.8)

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

#63460A

Ochre · DarkOliveGreen · Amber Gold

HEX
#63460A
RGB
rgb(99, 70, 10)
HSL
hsl(40, 82%, 21%)
HSB
hsb(40, 90%, 39%)
CMYK
cmyk(0%, 29%, 90%, 61%)
Oklch
oklch(41.6% 0.081 79.6)

Traditional「Ochre」· Paint「Amber Gold」· Creative Blush Sunrise

#B07500

Ochre · DarkGoldenRod · Honey Gold

HEX
#B07500
RGB
rgb(176, 117, 0)
HSL
hsl(40, 100%, 35%)
HSB
hsb(40, 100%, 69%)
CMYK
cmyk(0%, 34%, 100%, 31%)
Oklch
oklch(60.9% 0.129 74.0)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#EDB037

Ginger · GoldenRod · Sunflower

HEX
#EDB037
RGB
rgb(237, 176, 55)
HSL
hsl(40, 83%, 57%)
HSB
hsb(40, 77%, 93%)
CMYK
cmyk(0%, 26%, 77%, 7%)
Oklch
oklch(79.4% 0.147 80.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

61A7C1
C27B61

Analogous

61C2AB
61A7C1
6178C2

Triadic

61A7C1
C261A8
A8C261

Split-Comp.

61A7C1
C26178
C2AB61

Tetradic

61A7C1
AB61C2
C27B61
78C261

Contrast Matrix WCAG 2.1 Contrast

61A7C1
037AA6
63460A
B07500
EDB037
—
1.8
Fail
3.2
AA Large
1.4
Fail
1.4
Fail
1.8
Fail
—
1.8
Fail
1.2
Fail
2.5
Fail
3.2
AA Large
1.8
Fail
—
2.2
Fail
4.5
AA
1.4
Fail
1.2
Fail
2.2
Fail
—
2.0
Fail
1.4
Fail
2.5
Fail
4.5
AA
2.0
Fail
—
White BG
2.7Fail
4.8AA
8.7AAA
3.9AA Large
1.9Fail
Black BG
7.8AAA
4.3AA Large
2.4Fail
5.4AA
10.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7F80BB
37389B
565619
96961C
D3D254

Deuteranopia

7B76B9
302799
585A1C
9A9E23
D6DB5B

Tritanopia

64B6B5
099391
622427
AD3338
EA6B70

Achromatopsia

959595
5B5B5B
484848
797979
B4B4B4

Shades & Tints Shades & Tints

#61A7C1

Dark
Light

#037AA6

Dark
Light

#63460A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #61a7c1;
  --color-2: #037aa6;
  --color-3: #63460a;
  --color-4: #b07500;
  --color-5: #edb037;
}

SCSS

$color-1: #61a7c1;
$color-2: #037aa6;
$color-3: #63460a;
$color-4: #b07500;
$color-5: #edb037;

TAILWIND

colors: {
  'brand-1': '#61a7c1',
  'brand-2': '#037aa6',
  'brand-3': '#63460a',
  'brand-4': '#b07500',
  'brand-5': '#edb037',
}

RGB Array

[97, 167, 193], [3, 122, 166], [99, 70, 10], [176, 117, 0], [237, 176, 55]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #61A7C1, #037AA6, #63460A, #B07500, #EDB037 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #61a7c1; --color-2: #037aa6; --color-3: #63460a; --color-4: #b07500; --color-5: #edb037. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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