Color Tools

Generate palettes and check WCAG contrast compliance.

Free Color Palette & Contrast Checker

Explore, convert, and manipulate colors with our free online color tools. Convert between HEX, RGB, HSL, and HSB color formats instantly โ€” perfect for web designers, developers, and digital artists who need to work across different color systems. Pick colors from a visual color picker, generate complementary and analogous color palettes, check contrast ratios for WCAG accessibility compliance, and explore color theory relationships. HEX codes are the web standard for CSS and HTML; RGB values are used in design software and CSS; HSL (Hue-Saturation-Lightness) is the most intuitive model for human color perception and CSS color manipulation; HSB/HSV (Hue-Saturation-Brightness) is the standard in Adobe Photoshop and Illustrator color pickers. Whether you're building a design system, ensuring accessible color contrast for UI, extracting a brand color from a logo, or exploring palette options for a project, our color tools give you everything in one place.

How to Use

  1. Switch between "Palette Generator" and "Contrast Checker" tabs.
  2. For palettes: pick a base color and a harmony type to generate matching colors.
  3. For contrast: set foreground and background colors to check WCAG AA/AAA compliance.
  4. Click any color swatch to copy its hex value to the clipboard.

FAQ

What color formats are supported?
The tool supports HEX (6-digit hexadecimal, e.g., #3B82F6), RGB (red/green/blue values 0โ€“255, e.g., rgb(59, 130, 246)), HSL (hue 0โ€“360ยฐ, saturation 0โ€“100%, lightness 0โ€“100%), and HSB/HSV (hue 0โ€“360ยฐ, saturation 0โ€“100%, brightness/value 0โ€“100%). These four formats cover virtually all use cases in web development, CSS, design software (Figma, Photoshop, Sketch, XD), and digital art.
What is the difference between HSL and HSB?
HSL (Hue-Saturation-Lightness) and HSB/HSV (Hue-Saturation-Brightness/Value) are both cylindrical representations of the RGB color space, but they differ in how they define "lightness." In HSL, a lightness of 100% always produces white regardless of saturation. In HSB, a brightness of 100% can be any fully saturated color (not white). HSB is the model used in Adobe software color pickers. HSL is preferred in CSS because it's more intuitive for creating color variations: adjusting only lightness lets you darken or lighten a color while keeping its hue and saturation constant.
How do I check color contrast for accessibility?
WCAG (Web Content Accessibility Guidelines) requires a contrast ratio of at least 4.5:1 between text and background color for normal text (AA compliance), and 3:1 for large text (18pt+ or 14pt bold). A ratio of 7:1 meets AAA compliance. Our tool calculates the contrast ratio between any two colors so you can verify your design meets accessibility standards. This is especially important for body text, form labels, and interactive elements.
What is a complementary color?
A complementary color is directly opposite on the color wheel โ€” 180ยฐ away in hue. Complementary pairs create maximum contrast and visual tension, making them effective for call-to-action buttons, highlights, and attention-grabbing design elements. For example, the complement of blue (#3B82F6) is orange. Analogous colors (30ยฐโ€“60ยฐ adjacent on the wheel) create harmonious, low-contrast palettes ideal for backgrounds and supporting elements.

Related Tools

You Might Also Like