Free Color Tools for Designers & Developers
Explore any color, generate palettes, check accessibility contrast, and convert between formats in one workflow.
#3498DB Color Information
Hex color code: #3498DB
The hex color #3498DB is a tranquil blue with RGB values of (52, 152, 219) and HSL of (204°, 70%, 53%). It is widely used in graphic design.
Shades (click to copy)
color: #3498DB; background-color: #3498DB; border-color: #3498DB; box-shadow: 0 0 10px #3498DB; border: 2px solid #3498DB;
bg-[#3498DB] text-[#3498DB] border-[#3498DB] shadow-[0_0_10px_3498DB]
Generate Gradient
background: linear-gradient(90deg, #3498DB, #FF5733);
Preview in UI
Button
Badge
Text Highlight
The quick brown fox jumps over the lazy dog. highlighted text example shows how the color looks as a text highlight.
Card
Card Title
This card uses your color as a border accent.
Alert / Toast
Link / Accent
This is a paragraph with a link using your color. The color can be applied to interactive elements.
Related Colors (click to copy)
Complementary
Analogous
Triadic
Split Complementary
Tetradic
Monochromatic
Popular Colors (click to select)
Color Theory
Relationships based on the position of #3498DB in the color wheel.
Click any dot to copy its HEX value.
Color Values
RGB
52, 152, 219
HSL
204°, 70%, 53%
CMYK
76%, 31%, 0%, 14%
Contrast with #3498DB
Sample text on this color - The quick brown fox jumps over the lazy dog.
Need more control? Contrast Checker →
Continue exploring #3498DB
Color Conversion Tools
HEX to RGB
Convert hex codes to RGB values for CSS and design tools.
RGB to HEX
Convert RGB values to hex codes. Works with any design software.
RGB to HSL
Translate RGB to HSL for intuitive color adjustments.
HSL to RGB
Convert HSL back to RGB for web development.
HSL to HEX
Generate hex codes from HSL values.
All Formats
Convert between HEX, RGB, HSL, and CMYK in one place.
Palette Generator
Build harmonious color schemes from any base color.
Tailwind Scale
Generate 50–950 color scales for design systems.
Contrast Checker
Test WCAG accessibility compliance for any color pair.
Popular Named Colors
View all →Frequently Asked Questions
What is a HEX color code?
A HEX code is a six-digit format for specifying colors in CSS and design tools. Each pair of digits represents red, green, and blue values (00–FF). For example, #FF5733 is RGB(255, 87, 51).
How do I convert between color formats?
Enter any HEX, RGB, or HSL value above and the tool converts it instantly. RGB defines colors by red, green, and blue amounts. HSL defines them by hue (color wheel position), saturation, and lightness.
What contrast ratio do I need for accessibility?
WCAG requires 4.5:1 for normal text and 3:1 for large text. Higher ratios mean better readability. Use the contrast checker to verify your combinations meet accessibility standards.
How do I generate color palettes?
Start with any color and the palette generator creates harmonious combinations: complementary (opposite on color wheel), analogous (adjacent), triadic (evenly spaced), or monochromatic (shades and tints).