• Omnilude ToolsCollection of Online Tools
  • Home
Online Tools
  • Developer Tools
    • UUID Generator
    • Timestamp Converter
    • Encoder/Decoder
    • Color Picker
    • Regex Tester
    • Data Converter
    • Hash Generator
    • Cron Expression
    • Naming Convention
    • JWT Debugger
    • Browser Info
    • Number Base
    • Meta Tag Generator
    • Password
  • Text Tools
  • Useful Tools
  • Time Tools
  • Calculator Tools

Color Picker

Convert color codes

Updates

Recently shipped improvements

New
Change theme
Light Mode
Dark Mode
System

Select Color

R
G
B

Color Values

HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)

Color Palette

Click to select and copy
base

white

#FFFFFF

black

#000000

slate

slate-50

#F8FAFC

slate-100

#F1F5F9

slate-200

#E2E8F0

slate-300

#CBD5E1

slate-400

#94A3B8

slate-500

#64748B

slate-600

#475569

slate-700

#334155

slate-800

#1E293B

slate-900

#0F172A

slate-950

#020617

gray

gray-50

#F9FAFB

gray-100

#F3F4F6

gray-200

#E5E7EB

gray-300

#D1D5DB

gray-400

#9CA3AF

gray-500

#6B7280

gray-600

#4B5563

gray-700

#374151

gray-800

#1F2937

gray-900

#111827

gray-950

#030712

zinc

zinc-50

#FAFAFA

zinc-100

#F4F4F5

zinc-200

#E4E4E7

zinc-300

#D4D4D8

zinc-400

#A1A1AA

zinc-500

#71717A

zinc-600

#52525B

zinc-700

#3F3F46

zinc-800

#27272A

zinc-900

#18181B

zinc-950

#09090B

neutral

neutral-50

#FAFAFA

neutral-100

#F5F5F5

neutral-200

#E5E5E5

neutral-300

#D4D4D4

neutral-400

#A3A3A3

neutral-500

#737373

neutral-600

#525252

neutral-700

#404040

neutral-800

#262626

neutral-900

#171717

neutral-950

#0A0A0A

stone

stone-50

#FAFAF9

stone-100

#F5F5F4

stone-200

#E7E5E4

stone-300

#D6D3D1

stone-400

#A8A29E

stone-500

#78716C

stone-600

#57534E

stone-700

#44403C

stone-800

#292524

stone-900

#1C1917

stone-950

#0C0A09

red

red-50

#FEF2F2

red-100

#FEE2E2

red-200

#FECACA

red-300

#FCA5A5

red-400

#F87171

red-500

#EF4444

red-600

#DC2626

red-700

#B91C1C

red-800

#991B1B

red-900

#7F1D1D

red-950

#450A0A

orange

orange-50

#FFF7ED

orange-100

#FFEDD5

orange-200

#FED7AA

orange-300

#FDBA74

orange-400

#FB923C

orange-500

#F97316

orange-600

#EA580C

orange-700

#C2410C

orange-800

#9A3412

orange-900

#7C2D12

orange-950

#431407

amber

amber-50

#FFFBEB

amber-100

#FEF3C7

amber-200

#FDE68A

amber-300

#FCD34D

amber-400

#FBBF24

amber-500

#F59E0B

amber-600

#D97706

amber-700

#B45309

amber-800

#92400E

amber-900

#78350F

amber-950

#451A03

yellow

yellow-50

#FEFCE8

yellow-100

#FEF9C3

yellow-200

#FEF08A

yellow-300

#FDE047

yellow-400

#FACC15

yellow-500

#EAB308

yellow-600

#CA8A04

yellow-700

#A16207

yellow-800

#854D0E

yellow-900

#713F12

yellow-950

#422006

lime

lime-50

#F7FEE7

lime-100

#ECFCCB

lime-200

#D9F99D

lime-300

#BEF264

lime-400

#A3E635

lime-500

#84CC16

lime-600

#65A30D

lime-700

#4D7C0F

lime-800

#3F6212

lime-900

#365314

lime-950

#1A2E05

green

green-50

#F0FDF4

green-100

#DCFCE7

green-200

#BBF7D0

green-300

#86EFAC

green-400

#4ADE80

green-500

#22C55E

green-600

#16A34A

green-700

#15803D

green-800

#166534

green-900

#14532D

green-950

#052E16

emerald

emerald-50

#ECFDF5

emerald-100

#D1FAE5

emerald-200

#A7F3D0

emerald-300

#6EE7B7

emerald-400

#34D399

emerald-500

#10B981

emerald-600

#059669

emerald-700

#047857

emerald-800

#065F46

emerald-900

#064E3B

emerald-950

#022C22

teal

teal-50

#F0FDFA

teal-100

#CCFBF1

teal-200

#99F6E4

teal-300

#5EEAD4

teal-400

#2DD4BF

teal-500

#14B8A6

teal-600

#0D9488

teal-700

#0F766E

teal-800

#115E59

teal-900

#134E4A

teal-950

#042F2E

cyan

cyan-50

#ECFEFF

cyan-100

#CFFAFE

cyan-200

#A5F3FC

cyan-300

#67E8F9

cyan-400

#22D3EE

cyan-500

#06B6D4

cyan-600

#0891B2

cyan-700

#0E7490

cyan-800

#155E75

cyan-900

#164E63

cyan-950

#083344

sky

sky-50

#F0F9FF

sky-100

#E0F2FE

sky-200

#BAE6FD

sky-300

#7DD3FC

sky-400

#38BDF8

sky-500

#0EA5E9

sky-600

#0284C7

sky-700

#0369A1

sky-800

#075985

sky-900

#0C4A6E

sky-950

#082F49

blue

blue-50

#EFF6FF

blue-100

#DBEAFE

blue-200

#BFDBFE

blue-300

#93C5FD

blue-400

#60A5FA

blue-500

#3B82F6

blue-600

#2563EB

blue-700

#1D4ED8

blue-800

#1E40AF

blue-900

#1E3A8A

blue-950

#172554

indigo

indigo-50

#EEF2FF

indigo-100

#E0E7FF

indigo-200

#C7D2FE

indigo-300

#A5B4FC

indigo-400

#818CF8

indigo-500

#6366F1

indigo-600

#4F46E5

indigo-700

#4338CA

indigo-800

#3730A3

indigo-900

#312E81

indigo-950

#1E1B4B

violet

violet-50

#F5F3FF

violet-100

#EDE9FE

violet-200

#DDD6FE

violet-300

#C4B5FD

violet-400

#A78BFA

violet-500

#8B5CF6

violet-600

#7C3AED

violet-700

#6D28D9

violet-800

#5B21B6

violet-900

#4C1D95

violet-950

#2E1065

purple

purple-50

#FAF5FF

purple-100

#F3E8FF

purple-200

#E9D5FF

purple-300

#D8B4FE

purple-400

#C084FC

purple-500

#A855F7

purple-600

#9333EA

purple-700

#7E22CE

purple-800

#6B21A8

purple-900

#581C87

purple-950

#3B0764

fuchsia

fuchsia-50

#FDF4FF

fuchsia-100

#FAE8FF

fuchsia-200

#F5D0FE

fuchsia-300

#F0ABFC

fuchsia-400

#E879F9

fuchsia-500

#D946EF

fuchsia-600

#C026D3

fuchsia-700

#A21CAF

fuchsia-800

#86198F

fuchsia-900

#701A75

fuchsia-950

#4A044E

pink

pink-50

#FDF2F8

pink-100

#FCE7F3

pink-200

#FBCFE8

pink-300

#F9A8D4

pink-400

#F472B6

pink-500

#EC4899

pink-600

#DB2777

pink-700

#BE185D

pink-800

#9D174D

pink-900

#831843

pink-950

#500724

rose

rose-50

#FFF1F2

rose-100

#FFE4E6

rose-200

#FECDD3

rose-300

#FDA4AF

rose-400

#FB7185

rose-500

#F43F5E

rose-600

#E11D48

rose-700

#BE123C

rose-800

#9F1239

rose-900

#881337

rose-950

#4C0519

Color Formats

HEX

#RRGGBB format. Most commonly used in CSS

RGB

Red, Green, Blue (0-255)

HSL

Hue, Saturation, Lightness. Intuitive color adjustment

HSV/HSB

Hue, Saturation, Value. Used in graphic tools

OKLCH

Perceptually uniform modern CSS color space

RGBA/HSLA

Includes alpha (transparency) channel

What is a Color Picker?

A Color Picker is an essential tool for designers and developers that allows you to select, preview, and convert colors between multiple color formats. Colors on the web and in digital design are represented using various color models — HEX codes for CSS, RGB for screen displays, HSL for intuitive hue/saturation adjustments, HSV for graphic design tools, and OKLCH for perceptually uniform modern CSS. This tool provides instant bidirectional conversion between all these formats, along with an interactive color selector, palette generator, and random color feature — all running in your browser with no data uploaded.

  • Convert to and from five color formats: HEX, RGB, HSL, HSV, OKLCH
  • Intuitive color sliders and color space selection
  • Supports alpha (transparency) channel adjustment
  • Copy color code with one click
  • Random color generation function
  • Built-in basic and advanced color palettes

How to Use

  1. 1

    Select a Color

    Drag the color slider or click in the color well to select the color you want. Alternatively, you can directly enter HEX code, etc.

  2. 2

    Check format

    Selected colors are automatically converted and displayed in all formats including HEX, RGB, HSL, HSV, and OKLCH.

  3. 3

    Transparency control

    In the Alpha tab, you can create a translucent color by adjusting the transparency from 0 to 100%.

  4. 4

    Copy code

    Click the value in the color format you need to copy it automatically. Then paste it directly into CSS, a design tool, or another destination.

Frequently Asked Questions

HEX is a hexadecimal notation of the form #RRGGBB, most commonly used in CSS. RGB expresses colors as a combination of red (0-255), green (0-255), and blue (0-255). HSL is closest to human intuition by expressing color (Hue, 0-360), Saturation (0-100%), and Lightness (0-100%).

OKLCH is a modern, perceptually uniform CSS color space. In HSL, colors can appear to have different brightness even at the same saturation and lightness. OKLCH addresses this and helps create consistent palettes. It is included in CSS Color Level 4.

The alpha value represents the transparency of the color, ranging from 0 (completely transparent) to 1 (completely opaque). In CSS, it is used like rgba(59, 130, 246, 0.5), and in HEX, add 2 digits to the end like #3B82F680. Used for overlays, shadows, backgrounds, etc.

According to WCAG 2.1 guidelines, the contrast ratio between text and background should be at least 4.5:1 for regular text and 3:1 for large text. When choosing colors, it is important to check the contrast with the background color to ensure that even visually impaired people can read.

If you enter HEX code copied from a design tool such as Figma or Sketch into this tool, it will be automatically converted to a format available in CSS, such as RGB or HSL. Managing it with the CSS variable is efficient when changing themes, and the HSL format makes it easy to adjust brightness/saturation.

Tips & Best Practices

  • The HSL format is advantageous for theme color work because it allows you to easily create light/dark variations of the same color by simply adjusting the brightness (L).
  • Get inspired with the Random Color feature, then fine-tune with the color sliders to create creative palettes.
  • Dark mode/light mode color switching is easy when used with CSS custom property (variable)
  • You can quickly copy the code by clicking on a frequently used color in the color palette.
  • The OKLCH format allows you to design color systems that are perceptually consistent in saturation and brightness.

Omnilude Tools

A free collection of online tools for developers, designers, and creators. All data is processed locally in your browser.

Developer Tools

  • UUID Generator
  • Timestamp Converter
  • Encoder/Decoder
  • Color Picker

Text Tools

  • JSON Editor
  • Text Compare
  • Text Counter
  • Markdown

Legal

  • Privacy Policy
  • Terms of Service
  • About Us

© 2026 Omnilude. All rights reserved.

Send feedback