Skip to content

CSS named color

PaleTurquoise #AFEEEE

PaleTurquoise (CSS keyword paleturquoise) has the hex code #AFEEEE and the RGB value rgb(175, 238, 238): a pale, muted cyan.

PaleTurquoise#AFEEEE

A pale, soft turquoise (#afeeee). Useful as a gentle cyan background; too light for text.

Color codes for PaleTurquoise

Color codes for PaleTurquoise
CSS keywordpaleturquoise
HEX#AFEEEE
RGBrgb(175, 238, 238)
HSLhsl(180, 65%, 81%)
HWBhwb(180 69% 7%)
OKLCHoklch(90.7% 0.063 196.1)
CMYK (naive, no ICC profile)cmyk(26%, 0%, 0%, 7%)
Decimal11,529,966
Hue familyCyans and teals

Contrast and accessibility

On paleturquoise, black text has a contrast ratio of 16.28:1 and passes AAA at any text size; white text reaches 1.28:1.

WCAG 2.2 contrast ratios (success criteria 1.4.3 and 1.4.6: AA needs 4.5:1 for normal text and 3:1 for large text, AAA needs 7:1 and 4.5:1). APCA Lc is the lightness contrast from the APCA-W3 0.0.98G model proposed for WCAG 3; a higher absolute value is more readable, and Lc 75 is its suggested minimum for body text.

Contrast and accessibility
PairRatioAAAA largeAAAAAA largeAPCA Lc
Black text on paleturquoise16.28:1PassPassPassPass89.3
White text on paleturquoise1.28:1FailFailFailFail−16.5
Paleturquoise text on white1.28:1FailFailFailFail14.3
Paleturquoise text on black16.28:1PassPassPassPass−89.5

Tints and shades

Each step mixes paleturquoise with white (tints) or black (shades) in gamma-encoded sRGB, the same result as color-mix(in srgb, paleturquoise, white 25%) in CSS.

Tints (mixed with white)

  1. 5%
    #b3efef
  2. 15%
    #bbf1f1
  3. 25%
    #c3f2f2
  4. 35%
    #cbf4f4
  5. 45%
    #d3f6f6
  6. 55%
    #dbf7f7
  7. 65%
    #e3f9f9
  8. 75%
    #ebfbfb
  9. 85%
    #f3fcfc
  10. 95%
    #fbfefe

Shades (mixed with black)

  1. 5%
    #a6e2e2
  2. 15%
    #95caca
  3. 25%
    #83b3b3
  4. 35%
    #729b9b
  5. 45%
    #608383
  6. 55%
    #4f6b6b
  7. 65%
    #3d5353
  8. 75%
    #2c3c3c
  9. 85%
    #1a2424
  10. 95%
    #090c0c

Color harmonies

Rotating the hue in OKLCH while keeping lightness and chroma, paleturquoise's complementary color is #FFD0D2 (close to pink), its analogous colors are #B9EED7 and #B4EAFF, and its triadic partners are #F1D4FD and #F9DBB2. For text on top, black gives the higher contrast.

Color harmonies
HarmonyRotationColor
Complementary+180°#ffd0d2
Analogous−30°, +30°#b9eed7#b4eaff
Triadic+120°, +240°#f1d4fd#f9dbb2
Split-complementary+150°, +210°#ffd0e9#ffd4be

Computed in OKLCH: the hue is rotated by 180° (complementary), ±30° (analogous), ±120° (triadic) and 180° ±30° (split-complementary) while lightness and chroma stay fixed. Results that fall outside sRGB are brought back with the CSS Color 4 gamut mapping algorithm. Because this uses OKLCH, the values differ from tools that rotate hue in HSL, but every color keeps the same perceived lightness.

Warm or cool?

PaleTurquoise is a cool color: its hue is 180° on the HSL wheel, in the green, blue and violet range that is conventionally called cool.

Nearest named and Tailwind colors

Distance is ΔE OK, the Euclidean distance in OKLab multiplied by 100. Values under about 2 are hard to tell apart side by side.

Nearest CSS named colors

Nearest CSS named colors
ColorHEXΔE OK
powderblue#b0e0e63.6
lightblue#add8e65.7
gainsboro#dcdcdc6.4

Nearest Tailwind v4 colors

Nearest Tailwind v4 colors
ColorHEXΔE OK
cyan-200#a2f4fd2.2
sky-200#b8e6fe3.7
teal-200#96f7e43.9

Code snippets

CSS
.element {
  color: paleturquoise;
  background-color: #afeeee;
  border-color: rgb(175 238 238);
  outline-color: oklch(90.7% 0.063 196.1);
}
Tailwind CSS
<div class="bg-[#afeeee] text-black">...</div>

/* or register it once in your CSS (Tailwind v4) */
@theme {
  --color-paleturquoise: #afeeee;
}
/* then use bg-paleturquoise, text-paleturquoise, border-paleturquoise */
SwiftUI
import SwiftUI

extension Color {
  static let paleturquoise = Color(red: 0.686, green: 0.933, blue: 0.933)
}
Jetpack Compose
import androidx.compose.ui.graphics.Color

val Paleturquoise = Color(0xFFAFEEEE)
Flutter
import 'package:flutter/material.dart';

const paleturquoise = Color(0xFFAFEEEE);
Android XML
<!-- res/values/colors.xml -->
<color name="paleturquoise">#AFEEEE</color>

Frequently asked questions

What is the hex code for paleturquoise?
The hex code for paleturquoise is #AFEEEE. The same color is rgb(175, 238, 238), hsl(180, 65%, 81%) and oklch(90.7% 0.063 196.1), and in CSS you can also write the keyword paleturquoise directly.
Is paleturquoise a warm or cool color?
PaleTurquoise is a cool color: its hue is 180° on the HSL wheel, in the green, blue and violet range that is conventionally called cool.
What colors go with paleturquoise?
Rotating the hue in OKLCH while keeping lightness and chroma, paleturquoise's complementary color is #FFD0D2 (close to pink), its analogous colors are #B9EED7 and #B4EAFF, and its triadic partners are #F1D4FD and #F9DBB2. For text on top, black gives the higher contrast.
Can you use white text on paleturquoise?
White text on paleturquoise has a contrast ratio of 1.28:1, which fails AA even for large text under WCAG 2.2. Black text reaches 16.28:1 and passes both AA and AAA. In APCA terms that is Lc −16.5 for white and Lc 89.3 for black.
What is the RGB value of paleturquoise?
PaleTurquoise is rgb(175, 238, 238): red 175, green 238 and blue 238 on the 0 to 255 scale, or 68.6%, 93.3% and 93.3%. As a decimal integer it is 11529966.

Last reviewed by Arielton Oberek.