Webiston Logo
Back to Tools

Color Converter and Palette Generator

A tool for color conversion between HEX, RGB, HSL formats and palette generation

Palette type:
Color Selection
Valid format
100%

Color information

RGB:
59, 130, 246
HSL:
217°, 91%, 60%
Opacity:
100%

Preset colors:

Formats and Information

HEX

#3B82F6
Most widely used in web development

RGB

rgb(59, 130, 246)
R: 59, G: 130, B: 246

HSL

hsl(217, 91%, 60%)
H: 217°, S: 91%, L: 60%

RGBA

rgba(59, 130, 246, 1)
RGB with alpha channel

HSLA

hsla(217, 91%, 60%, 1)
HSL with alpha channel

Lab

lab(56% 18 -64)
L: 56, a: 18, b: -64

LCH

lch(56% 66 286)
L: 56, C: 66, H: 286°

OKLab

oklab(0.48 -0.14 -0.3)
L: 0.48, a: -0.14, b: -0.3

OKLCH

oklch(0.48 0.33 245)
L: 0.48, C: 0.33, H: 245°
0Formats0Characters

Monochromatic palette

Copy
#f2f6fd
Copy
#e0eafa
Copy
#c2d5f5
Copy
#8fb8fa
Copy
#5593f7
Copy
#3c83f6
Copy
#0a5adb
Copy
#0846aa
Copy
#003180
Copy
#001d4d
Copy
#000a1a

Click to copy color

Color History & Favorites

No history yet

Tailwind Shades
Base: #3b82f6
Copy
50
#f2f6fd
Copy
100
#e0eafa
Copy
200
#c2d5f5
Copy
300
#8fb8fa
Copy
400
#5593f7
Copy
500
#3c83f6
Copy
600
#0a5adb
Copy
700
#0846aa
Copy
800
#003180
Copy
900
#001d4d
Copy
950
#000a1a

Export options:

Gradient Generator
Base: #3b82f6

Color Stops:

%
%

Export Options:

background: linear-gradient(90deg, #3b82f6 0%, #ffffff 100%);

Color Format Examples

HEX Formats
#FF0000
#0000FF
#00FF00
RGB Formats
rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(0, 255, 0)
HSL Formats
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(120, 100%, 50%)

About Color Formats

HEX Format

  • • Most widely used in web development
  • • #RRGGBB format (6 characters)
  • • Used directly in CSS
  • • Hexadecimal number system

RGB Format

  • • Red, Green, Blue values
  • • 0-255 range for each channel
  • • For monitors and screens
  • • Widely used in JavaScript

HSL Format

  • • Hue, Saturation, Lightness
  • • Human-readable format
  • • Supported in CSS3
  • • Convenient for color adjustments