Colour Codes

Free colour codes tool to pick, explore, compare, and copy colour codes for websites, apps, and digital designs.

Inspect HEX, RGB, HSL, and OKLCH values with palettes, harmonies, WCAG checks, and realistic interface previews.

Your inputs stay on your device

Colour Picker

live result

Saturation & Value

Hue

Native Picker

HEX Code

Most Popular Colours

live result

A curated collection of widely used colours for web, apps, branding, and digital design.

21 colours

Select

Colour Codes

live result

HEX

#0D9488

RGBrgb(13, 148, 136)

HSLhsl(175°, 84%, 32%)

OKLCHoklch(0.600 0.104 184.7)

Colour Palette

live result

A light-to-dark scale built from the selected hue and saturation.

50#ECFDFC

100#D0FBF7

200#A1F7F0

300#72F3E8

400#43EFE0

500#14EBD9

600#10BCAD

700#0C8D82

800#085E57

900#042F2B

950#021716

Colour Harmonies

live result

Complementary2 colours

#0D9488

#960D18

Analogous3 colours

#0D9488

#0D5D96

#0D9646

Triadic3 colours

#0D9488

#8B0D96

#968B0D

Split Complementary3 colours

#0D9488

#960D5D

#96460D

Tetradic4 colours

#0D9488

#0D1896

#960D18

#968B0D

Colour Contrast

live result

Foreground (Text)

Background

AaThe quick brown fox jumps over the lazy dog.

Contrast Ratio3.74:1

AA Normal Fail

AA Large Pass

AAA Normal Fail

AAA Large Fail

Design Preview

live result

Mood

Clear and confident — a focused direction for trustworthy digital experiences.

Practical Good For

trustworthy products
data interfaces
primary actions

Studio

Features Pricing About

New Release v2.0

Build better interfaces, faster.

Create beautiful, accessible interfaces with tools that adapt to your exact specifications.

Colour Library

live result

HTML Colour Names

Search and filter standard web colours.

Swatch Shape

Colour family

AliceBlue

#F0F8FF

AntiqueWhite

#FAEBD7

Aqua

#00FFFF

Aquamarine

#7FFFD4

Azure

#F0FFFF

Beige

#F5F5DC

Bisque

#FFE4C4

Black

#000000

BlanchedAlmond

#FFEBCD

Blue

#0000FF

BlueViolet

#8A2BE2

Brown

#A52A2A

BurlyWood

#DEB887

CadetBlue

#5F9EA0

Chartreuse

#7FFF00

Chocolate

#D2691E

Coral

#FF7F50

CornflowerBlue

#6495ED

Cornsilk

#FFF8DC

Crimson

#DC143C

Cyan

#00FFFF

DarkBlue

#00008B

DarkCyan

#008B8B

DarkGoldenRod

#B8860B

DarkGray

#A9A9A9

DarkGrey

#A9A9A9

DarkGreen

#006400

DarkKhaki

#BDB76B

DarkMagenta

#8B008B

DarkOliveGreen

#556B2F

DarkOrange

#FF8C00

DarkOrchid

#9932CC

DarkRed

#8B0000

DarkSalmon

#E9967A

DarkSeaGreen

#8FBC8F

DarkSlateBlue

#483D8B

DarkSlateGray

#2F4F4F

DarkSlateGrey

#2F4F4F

DarkTurquoise

#00CED1

DarkViolet

#9400D3

DeepPink

#FF1493

DeepSkyBlue

#00BFFF

DimGray

#696969

DimGrey

#696969

DodgerBlue

#1E90FF

FireBrick

#B22222

FloralWhite

#FFFAF0

ForestGreen

#228B22

Fuchsia

#FF00FF

Gainsboro

#DCDCDC

GhostWhite

#F8F8FF

Gold

#FFD700

GoldenRod

#DAA520

Gray

#808080

Grey

#808080

Green

#008000

GreenYellow

#ADFF2F

HoneyDew

#F0FFF0

HotPink

#FF69B4

IndianRed

#CD5C5C

Indigo

#4B0082

Ivory

#FFFFF0

Khaki

#F0E68C

Lavender

#E6E6FA

LavenderBlush

#FFF0F5

LawnGreen

#7CFC00

LemonChiffon

#FFFACD

LightBlue

#ADD8E6

LightCoral

#F08080

LightCyan

#E0FFFF

LightGoldenRodYellow

#FAFAD2

LightGray

#D3D3D3

LightGrey

#D3D3D3

LightGreen

#90EE90

LightPink

#FFB6C1

LightSalmon

#FFA07A

LightSeaGreen

#20B2AA

LightSkyBlue

#87CEFA

LightSlateGray

#778899

LightSlateGrey

#778899

LightSteelBlue

#B0C4DE

LightYellow

#FFFFE0

Lime

#00FF00

LimeGreen

#32CD32

Linen

#FAF0E6

Magenta

#FF00FF

Maroon

#800000

MediumAquaMarine

#66CDAA

MediumBlue

#0000CD

MediumOrchid

#BA55D3

MediumPurple

#9370DB

MediumSeaGreen

#3CB371

MediumSlateBlue

#7B68EE

MediumSpringGreen

#00FA9A

MediumTurquoise

#48D1CC

MediumVioletRed

#C71585

MidnightBlue

#191970

MintCream

#F5FFFA

MistyRose

#FFE4E1

Moccasin

#FFE4B5

NavajoWhite

#FFDEAD

Navy

#000080

OldLace

#FDF5E6

Olive

#808000

OliveDrab

#6B8E23

Orange

#FFA500

OrangeRed

#FF4500

Orchid

#DA70D6

PaleGoldenRod

#EEE8AA

PaleGreen

#98FB98

PaleTurquoise

#AFEEEE

PaleVioletRed

#DB7093

PapayaWhip

#FFEFD5

PeachPuff

#FFDAB9

Peru

#CD853F

Pink

#FFC0CB

Plum

#DDA0DD

PowderBlue

#B0E0E6

Purple

#800080

RebeccaPurple

#663399

Red

#FF0000

RosyBrown

#BC8F8F

RoyalBlue

#4169E1

SaddleBrown

#8B4513

Salmon

#FA8072

SandyBrown

#F4A460

SeaGreen

#2E8B57

Seashell

#FFF5EE

Sienna

#A0522D

Silver

#C0C0C0

SkyBlue

#87CEEB

SlateBlue

#6A5ACD

SlateGray

#708090

SlateGrey

#708090

Snow

#FFFAFA

SpringGreen

#00FF7F

SteelBlue

#4682B4

Tan

#D2B48C

Teal

#008080

Thistle

#D8BFD8

Tomato

#FF6347

Turquoise

#40E0D0

Violet

#EE82EE

Wheat

#F5DEB3

White

#FFFFFF

WhiteSmoke

#F5F5F5

Yellow

#FFFF00

YellowGreen

#9ACD32

Context & Reference

How it works

For designers and developers exploring a colour system from one seed colour.

utility guide

Method

Converts a local hex colour into screen and perceptual formats, then derives palettes, harmonies, and contrast checks.

How to use it

Use this utility with your own values, then review the clearly labelled result and copy it when you need it elsewhere.

Understand the result

Copyable colour codes, swatches, WCAG statuses, and a responsive preview update as the seed changes.

Example

Start with #0D9488 to explore a teal interface direction.

Practical tip

Colour suggestions are starting points; check the final design in context.

Notes

This utility runs locally in this browser. Colour suggestions are starting points; check the final design in context.

Useful next steps

Related tools

Continue with a closely related task, calculation, conversion, or local text tool.

Colour Contrast Checker

Check the contrast ratio of two solid hex colours.

Colour Palette Generator

Generate coordinated hex colour suggestions from a seed colour.

Colour Blindness Simulator

Preview an illustrative colour-vision simulation for one hex colour.

Tip Calculator & Bill Split

Free tip calculator to work out the tip and split a bill across any number of people.

Recipe Scaler

Scale a recipe up or down by changing the number of servings.

Square Footage Calculator

Calculate the area and perimeter of a rectangular room or space.