Color guide · Blue & blue-green colors

Turquoise Color

Turquoise is a luminous blue-green. It can suggest a bright aquatic palette or bring a fresh accent into a neutral interface. Its lightness makes dark lettering a better starting point than white lettering.

A bright blue-green for open, light compositions#40E0D0CSS keyword: turquoise

Turquoise color codes

HEX#40E0D0
RGBrgb(64, 224, 208)
HSLhsl(174, 72.1%, 56.5%)
CSS keywordturquoise

RGB values use the 0–255 scale. HSL values are rounded to one decimal place for display. CSS Color: named colors ↗

The name & the reference

What makes turquoise interesting?

The digital name is not a promise that a gemstone or a stretch of sea has this exact value. Natural surfaces have variation, shadows and reflections. In an illustration, a bright turquoise swatch often works best as a lit area surrounded by darker blue-green tones.

Read the reference: CSS Color: named colors ↗

Things with turquoise tones

These illustrated references explore a color family. Objects vary; none is a claim of an exact #40E0D0 match.

Illustrated placeholder · image coming later

Stone-inspired forms

A turquoise-colored stone illustration uses several tones; it does not identify a mineral specimen.

Illustrated placeholder · image coming later

Shallow-water scenes

Bright water references work well with pale sand and a darker horizon.

Illustrated placeholder · image coming later

Painted objects

A painted bicycle, tile or mug makes a small turquoise accent easy to picture.

A practical color study

Keep the brightest area small

Turquoise can provide a strong light-on-dark effect in a water illustration. Place it on a wave edge or small crystal highlight and keep the larger structure darker. If everything is equally bright, there is no focal point left.

For an aquatic page, try a light neutral reading area, a teal structural band and turquoise in a small decorative detail. Use a warm accent only where it reinforces the subject.

Ideas for using turquoise

01

Web interfaces

Use turquoise for a selection fill with dark text and a clear outline. Do not use a pale turquoise border as the only focus indicator on white.

02

Game art

Reserve the brightest turquoise for water sparkle, crystals or a magical effect. Use teal for the shadow structure.

03

Illustration

A limited turquoise, coral and cream palette can separate cool surroundings from a warm subject. Keep the warm accent smaller than the base areas.

Watch out: Very bright turquoise can overpower adjacent pastels. Check the design at full brightness and in grayscale.

Tints, shades & companion hues

These tints and shades are simple sRGB channel mixes with white or black. They are useful starting points, not perceptually equal steps or guaranteed accessible pairs. Select a swatch to copy its hex code.

Hue companions

Calculated in HSL with the same saturation and lightness. Complementary and analogous colors suggest hue relationships; they do not promise contrast.

Palettes featuring turquoise

Coastal Coral

A warm subject in cool surroundings

Explore palette →

See the palette at work

Palette preview studio

Compare two colors →

Try a website, a game scene, a poster or a room. Pick a role, then select a swatch to repaint it. These are schematic design previews, not rendered materials or a game engine.

Text is automatically chosen as black or white for opaque preview surfaces. This does not certify your exported palette for every use.

Color & craftStories · Studio
A thoughtful starting point

Make something worth exploring.

A clear reading surface, one useful accent and room for the details.

Explore the collection →
Design notesNew ideasSmall details

Try it in context

Live design & contrast preview

Change the surface and text independently. The text result uses opaque sRGB colors; it does not evaluate your entire page.

12.79:1 · AAA normal text

AA normal text needs 4.5:1; AA large text needs 3:1. Large text means at least 18 pt, or 14 pt bold. Ratios are assessed before rounding. This is a text check, not a complete accessibility audit. W3C: understanding text contrast ↗

A little color goes a long way

Your next good idea

Try a readable heading, a short paragraph and a clear action on this surface.

Example action →Static design sample · use the controls to change it

Compare turquoise with another color →

Questions about turquoise

Can I use white text on turquoise?

Measure your exact pair. This bright CSS shade favors a dark foreground for ordinary text.

Will this look the same in print?

No exact print match is promised. Paper, ink, color profiles and lighting affect the result. Use a physical proof when a precise material match matters.

Can I use these codes in a website or game?

Yes. Copy the exact code, give it a clear role in your palette and test text contrast. Add labels or shapes when color communicates important information.

Keep exploring

Explore blue & blue-green colors →

#FF7F50
Warm colors

Coral

A lively orange with a pink edge

Explore color →
#008080
Blue & blue-green colors

Teal

A deep balance of blue and green

Explore color →
#4169E1
Blue & blue-green colors

Royal Blue

A vivid blue with a violet undertone

Explore color →

A color name is a starting point

Digital codes describe sRGB colors. Natural objects, paint, ink and screens can look different under different lighting or calibration. Visual references illustrate color families rather than exact measured matches. Placeholder illustrations are clearly labeled. Design ideas are suggestions, not universal claims about emotion or culture.

Pick colors from an image · Convert a color · Check a complete text pair · Suggest a color guide