Color Converter

Convert colors between different formats like HEX, RGB, HSL, CMYK. Supports color picking, palette generation and color scheme analysis.

Color Picker

Use color picker to select color

Color Formats

Current color in various representation formats

#
rgb(,,)
hsl(,%,%)
hsv(,%,%)
cmyk(%,%,%,%)
oklch(%%)

Color Format Explanation

Learn about the characteristics and use cases of different color formats

HEX Hexadecimal

Uses 6-digit hexadecimal numbers to represent colors, such as #FF5733. This is the most commonly used color format in web development, with the best compatibility, suitable for use in CSS and HTML.

Format:#RRGGBB
Range:00-FF (0-255)
Advantages:Concise, good compatibility
Disadvantages:Not intuitive

RGB Red Green Blue

Uses the numerical values of red, green, and blue color channels to represent colors, such as rgb(255, 87, 51). This format is intuitive and easy to understand, suitable for designers and developers to understand color composition.

Format:rgb(R, G, B)
Range:0-255
Advantages:Intuitive, easy to understand
Disadvantages:Doesn't intuitively represent brightness

HSL Hue Saturation Lightness

Uses three attributes of hue, saturation, and lightness to represent colors, such as hsl(12, 100%, 60%). This format is closer to how humans perceive colors, making it easy to adjust the brightness and vibrancy of colors.

Format:hsl(H, S%, L%)
Range:H: 0-360°, S/L: 0-100%
Advantages:Intuitive, easy to adjust
Disadvantages:Doesn't intuitively represent brightness

HSV Hue Saturation Value

Uses three attributes of hue, saturation, and value to represent colors, such as hsv(12, 100%, 100%). This format is commonly used in graphics software, where the value parameter more intuitively represents color brightness.

Format:hsv(H, S%, V%)
Range:H: 0-360°, S/V: 0-100%
Advantages:Value is intuitive, easy to adjust
Disadvantages:Limited support in web browsers

CMYK Cyan Magenta Yellow Black

Uses four color channels of cyan, magenta, yellow, and black to represent colors, such as cmyk(0%, 66%, 80%, 0%). This is the standard format in the printing industry, suitable for design works that need to be printed.

Format:cmyk(C%, M%, Y%, K%)
Range:0-100%
Advantages:Printing standard, professional
Disadvantages:Inaccurate display on web

OKLCH Perceptual Color Space

Uses three attributes of perceptual lightness, chroma, and hue to represent colors, such as oklch(60% 50% 12). This is a modern color space that better matches human eye perception, supports a wider color gamut, and is suitable for modern display devices.

Format:oklch(L% C% H)
Range:L: 0-100%, C: 0-150, H: 0-360°
Advantages:Perceptually accurate, wide gamut
Disadvantages:Limited compatibility

Usage Suggestions

  • Web Development: Prioritize HEX and RGB formats for best compatibility
  • Design Adjustment: Use HSL format for easy adjustment of hue and saturation
  • Professional Printing: Use CMYK format to ensure print quality
  • Modern Applications: Consider using OKLCH format for better color performance
  • Color Selection: Use HSV sliders for intuitive color selection