HEX to HSL Converter
Convert HEX color codes to HSL (Hue, Saturation, Lightness) values. HSL is more intuitive for designers — easily adjust brightness and saturation without changing the base color.
What is HSL?
HSL represents colors using three components: Hue (0–360°, the color wheel position), Saturation (0–100%, color intensity), and Lightness (0–100%, brightness). It is more intuitive than RGB for color manipulation — to lighten a color, just increase L; to desaturate, decrease S; to shift the hue, change H.
HSL vs RGB for web design
HSL is ideal for creating color palettes and themes. To generate shades of a color, keep H and S fixed while varying L. To create complementary colors, add 180° to H. CSS supports hsl() natively: hsl(14, 100%, 60%) is equivalent to #FF5733 and rgb(255, 87, 51).
Frequently Asked Questions
What is the HSL value for pure red?
hsl(0, 100%, 50%) — Hue 0° (red), full saturation, 50% lightness. This equals #FF0000 / rgb(255, 0, 0).
How do I darken a color with HSL?
Reduce the Lightness (L) value. For example, hsl(14, 100%, 60%) is a bright orange-red; hsl(14, 100%, 30%) is the same hue, much darker. This is much easier than adjusting RGB values manually.
Related Convert Tools
SVG to JSX Converter
Convert SVG to JSX or a React/TypeScript component — camelCase attributes, style objects, forwardRef, memo, props spread
OpenAPI to TypeScript
Convert OpenAPI 3.x and Swagger 2.0 specs to TypeScript interfaces and types with $ref resolution, allOf/oneOf/anyOf, enums, and API operation types
JSON to Zod Converter
Convert JSON or JSON Schema to Zod validation schemas with $ref resolution, allOf/oneOf/anyOf, enum, format constraints, and required/optional fields
GraphQL to TypeScript
Convert GraphQL SDL schemas to TypeScript interfaces, types, enums, unions, and operations