Color guide · Blue & blue-green colors
Teal Color
Teal is a darker blue-green that can hold a whole layout together. It is less luminous than turquoise and gives light typography a potentially useful backdrop. It is a practical bridge between cool blues and leafy greens.
Teal color codes
#008080rgb(0, 128, 128)hsl(180, 100%, 25.1%)tealRGB 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 teal interesting?
In CSS, teal has equal green and blue channels with no red channel. That neat digital relationship does not make it an exact sample of water, feathers or stone. Water colors depend on lighting, depth and material in the water; a single named shade is only a design reference.
Read the reference: CSS Color: named colors ↗
Things with teal tones
These illustrated references explore a color family. Objects vary; none is a claim of an exact #008080 match.
Shaded water
A darker blue-green water illustration provides a starting point for teal backgrounds.
Decorative feathers
Some feather patterns suggest teal, with changing highlights and darker details.
Ceramic glaze
A teal mug or tile offers an easy way to imagine the color on a physical surface.
A practical color study
Give the dark surface a job
Teal can organize a layout through large calm areas. Use one deep teal band to frame a title, then let ivory or another light neutral carry the longer article. A bright turquoise detail works as a highlight because it is visibly lighter, not simply because it has a related name.
In ceramics or interior mockups, show the light source with a small lighter reflection. A uniform teal fill is useful for planning, while material texture belongs in a separate visual layer.
Ideas for using teal
Web interfaces
Try teal as a section background with a light foreground, then measure the exact pair. Keep link styling distinct from body text.
Game art
Use teal for deep water or magical objects and a brighter turquoise for glints. Value separation helps the object read at small sizes.
Branding
Combine teal with cream and a restrained warm accent. Test the logo in one color too, so recognition does not depend on the palette.
Watch out: Teal can merge with nearby dark greens. Separate adjacent chart series with markers, outlines or direct labels.
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 teal
See the palette at work
Palette preview studio
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.
Make something worth exploring.
A clear reading surface, one useful accent and room for the details.
Explore the collection →COLOR
IN MOTION
Make room for a new perspective.
Explore. Experiment. Create.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.
4.77:1 · AA 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 ↗
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 itCompare teal with another color →
Questions about teal
How is teal different from turquoise?
The CSS teal anchor is much darker than CSS turquoise. Both belong to the blue-green region, but everyday naming is less precise.
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
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