Pale Turquoise

#A4E7EB

Color Information

Pale Turquoise #A4E7EB

Complete color analysis with professional format conversions, accessibility metrics, and harmonious color combinations for your design projects.

HEX Format: #A4E7EB
RGB Values: 164, 231, 235
HSL Values: 183°, 64%, 78%
CMYK Values: 30%, 2%, 0%, 8%

Save to palette

Saving colours needs a free account. Sign in or create one.

Accessibility

How readable text is on this colour, measured against WCAG 2.2.

White text: 1.38:1 Fails
Black text: 15.21:1 AAA

Use black text on this colour — it reaches 15.21:1 and clears AA at any size.

AA: 4.5:1 for body text, 3:1 for large text and interface elements.
AAA: 7:1 for body text, 4.5:1 for large text.

Color Variations & Tints

The same hue, lighter and darker. Each one has its own page.

#C4EFF2

Lightness: 92%

Go to color
#B9EDEF

Lightness: 91%

Go to color
#AFEAED

Lightness: 90%

Go to color
#A4E7EB

Lightness: 78%

Current color
#8CC5C9

Lightness: 79%

Go to color
#74A5A8

Lightness: 69%

Go to color
#5D8688

Lightness: 59%

Go to color

Color Harmonies

Six established ways to build a palette around #A4E7EB. Click any swatch to copy its value, or open it to see the full breakdown.

Complementary

The colour directly opposite on the wheel.

#A4E7EB This color

#EBA7A3

Use it when: Highest possible contrast between two hues. Use it when one element has to stand out against everything else: a call-to-action button, a highlight, a single focal point.
Watch out: Side by side at full saturation the edges appear to vibrate. Give one colour far less area than the other, or take saturation out of one of them.

Split-complementary

Instead of the opposite colour, the two next to it.

#A4E7EB This color

#EBA3C3

#EBCAA3

Use it when: Almost the contrast of a complementary pair, but noticeably calmer. A good default when complementary feels too harsh: one dominant colour, two accents.
Watch out: The two accents are close to each other. Keep them apart in the layout, or one will read as a mistake.

Analogous

Direct neighbours on the wheel.

#A3EBCA

#A4E7EB This color

#A3C3EB

Use it when: Naturally harmonious because the colours share undertones. Works well for backgrounds, gradients and calm interfaces where nothing should shout.
Watch out: Contrast between them is low. Do not rely on hue alone to separate interactive elements - vary lightness as well.

Triadic

Three hues at equal distance, 120 degrees apart.

#A4E7EB This color

#EBA3E7

#E7EBA3

Use it when: Vivid and balanced at the same time. Suits playful, illustrative work and anything that needs three clearly distinct categories.
Watch out: Three strong colours are hard to balance. Let one dominate and treat the other two as accents, otherwise the result looks restless.

Tetradic

Four hues forming two complementary pairs.

#A4E7EB This color

#CAA3EB

#EBA7A3

#C3EBA3

Use it when: The richest of the classic schemes. Useful when a design genuinely needs four distinct colours, for example a chart with four series.
Watch out: The hardest scheme to control. Choose one lead colour, use the rest sparingly, and watch the balance between warm and cool.

Monochromatic

One hue, stepped through lightness.

#2CC1C9

#64D7DD

#A3E7EB

#DEF6F8

Use it when: Always coherent, because there is only one hue. The natural choice for interface hierarchies, single-series charts and restrained designs.
Watch out: Can read as flat. Add one neutral or a single accent colour wherever something needs to be noticed.

Using this color

The same colour behaves very differently depending on where it sits. The mockups show it leading a design; the cards below state contrast ratios, so you can see at a glance what holds up.

Landing page

Brand ProductPricingAbout

A headline that carries the page

Supporting copy sits underneath, quiet enough to stay out of the way.

Get started Learn more

Good morning

Your dashboard

Balance

1,248.00

White card on the lead colour

The safest pattern in the set: the card carries the text, the colour carries the mood.

Action

Coloured card

A second surface, drawn from the same palette.

Gradients between neighbouring hues stay clean. Across the wheel they pass through a muddy middle - keep those short.

#A4E7EB leads; the supporting tones are taken from its own scale, so what you see is one colour doing the whole job.

As a background

15.21:1 passes AA

Heading on this colour

Body text at black, the more readable of the two options.

Comfortable for body text at any size.

As a button

Primary action Secondary Subtle

The outlined and subtle variants use #1D8186 for the label, a darkened version of this colour so the text stays readable.

As text on white

needs adjusting

The colour itself

Adjusted for readability

At its original lightness this colour does not reach the 4.5:1 minimum on white. #1D8186 keeps the same hue and reaches 4.63:1.

As a section behind cards

Card title

White cards on a coloured band are a safe pattern: the card carries the text, the colour carries the mood.

As an accent

Highlighted notice

A coloured edge draws attention without touching legibility.

Body copy with an inline link in the adjusted shade.

Badge Outline

In a gradient

with its neighbour

with its complement

Neighbouring hues blend smoothly. Complements pass through a muddy middle, so keep that gradient short or add a stop.

How others see this colour

Around one in twelve men and one in two hundred women perceive colour differently. Two shades that look distinct to most people can collapse into one for them - which is why meaning should never rest on colour alone.

Normal vision

#A4E7EB

Protanopia

#DEE1EB

about 1% of men

Deuteranopia

#D1D7EC

about 1% of men

Tritanopia

#8BECE8

rare, affects both sexes

A scale you can ship

Ten steps from this colour, spaced in OKLab so each one looks as far from its neighbour as the next. Take it as a Tailwind palette, CSS variables, SCSS or JSON.

50 100 200 300 400 500 600 700 800 900

tailwind.config.js

colors: {
  'pale-turquoise': {
    '50': '#defcfe',
    '100': '#cdf2f4',
    '200': '#b6e3e6',
    '300': '#96cdd0',
    '400': '#71b0b4',
    '500': '#54969a',
    '600': '#3d7c80',
    '700': '#2a6164',
    '800': '#1e474a',
    '900': '#172f30',
  },
}

CSS variables

:root {
  --pale-turquoise-50: #defcfe;
  --pale-turquoise-100: #cdf2f4;
  --pale-turquoise-200: #b6e3e6;
  --pale-turquoise-300: #96cdd0;
  --pale-turquoise-400: #71b0b4;
  --pale-turquoise-500: #54969a;
  --pale-turquoise-600: #3d7c80;
  --pale-turquoise-700: #2a6164;
  --pale-turquoise-800: #1e474a;
  --pale-turquoise-900: #172f30;
}

SCSS

$pale-turquoise-50: #defcfe;
$pale-turquoise-100: #cdf2f4;
$pale-turquoise-200: #b6e3e6;
$pale-turquoise-300: #96cdd0;
$pale-turquoise-400: #71b0b4;
$pale-turquoise-500: #54969a;
$pale-turquoise-600: #3d7c80;
$pale-turquoise-700: #2a6164;
$pale-turquoise-800: #1e474a;
$pale-turquoise-900: #172f30;

JSON

{
    "pale-turquoise": {
        "50": "#defcfe",
        "100": "#cdf2f4",
        "200": "#b6e3e6",
        "300": "#96cdd0",
        "400": "#71b0b4",
        "500": "#54969a",
        "600": "#3d7c80",
        "700": "#2a6164",
        "800": "#1e474a",
        "900": "#172f30"
    }
}

Every value for this colour

This colour is the even blend of #49CFD7 and #FFFFFF.

Hex
RGB
HSL
CMYK

Show all colour spaces

RGB percent
HSV / HSB
CIE-LAB
CIE-LCH
CIE-LUV
XYZ
xyY
Hunter-Lab
Decimal
Binary
Web safe

sRGB, white point D65, 2° observer. Hunter-Lab follows its classic definition on illuminant C.

Use it in code

The same colour in the notations you are likely to need.

CSS

:root {
  --pale-turquoise: #a4e7eb;
}

.element {
  color: #a4e7eb;
  background-color: rgb(164 231 235 / 10%);
}

Tailwind

// tailwind.config.js
theme: {
  extend: {
    colors: {
      'pale-turquoise': '#a4e7eb',
    },
  },
}

SCSS

$pale-turquoise: #a4e7eb;
$pale-turquoise-light: lighten($pale-turquoise, 15%);
$pale-turquoise-dark: darken($pale-turquoise, 15%);

Swift

Color(red: 0.643, green: 0.906, blue: 0.922)
// UIKit
UIColor(red: 0.643, green: 0.906, blue: 0.922, alpha: 1.0)

Android

<!-- colors.xml -->
<color name="pale_turquoise">#A4E7EB</color>

// Compose
val PaleTurquoise = Color(0xFFA4E7EB)

Other

hsl(183, 64%, 78%)
rgb(164, 231, 235)
#A4E7EB

Be picky and fine tune your color: colors very near to #A4E7EB

Systematic progression of extremely similar colors. Each color represents a precise step in lightness variation.

You are here

#A4E7EB

Current: #A4E7EB

Discover More Colors

Explore a randomly curated selection of colors. Each refresh brings new inspiration for your palette.