HEX and CSS Output Tool
Color Wheel Studio, harmonies, CSS variables, Tailwind & shadow generator
Color Picker & Inputs
Indigo
#4F46E5
#
Color Wheel
HEX
#4F46E5
RGBA
rgba(79, 70, 229, 1)
HSLA
hsla(243, 75%, 59%, 1)
OKLCH
oklch(0.52 0.23 274.5)
CMYK
cmyk(66%, 69%, 0%, 10%)
White Text Contrast
5.2:1 AA
Black Text Contrast
4.1:1 FAIL
Color Harmonies Generator
Live Component Showcase
Interactive Elements
Button & Shadow
Glassmorphism Card
Translucent light glass styling with soft backdrop blur.
Tints & Shades Spectrum
10-Step Gradient
Color Vision Accessibility Simulator
Colorblindness perception
Protanopia
#000000
Deuteranopia
#000000
Tritanopia
#000000
Achromatopsia
#000000
How to Use the HEX & CSS Output Tool
1
Select or Type Color
Click the square color chip next to the HEX code to trigger the Color Wheel popover, or type a 6-digit HEX value directly into the text input.
2
Adjust Lightness & Alpha
Use the Opacity / Alpha and Lightness sliders to tweak transparency and brightness levels in real time.
3
Explore Harmonies & Contrast
Select color schemes (Complementary, Triadic, Analogous) and check WCAG AA / AAA accessibility scores against white and black backgrounds.
4
Export Code Snippets
Switch code tabs to generate ready-to-use snippets for Standard CSS, CSS Variables, Glassmorphism, Gradients, Box-Shadows, and Tailwind CSS.
Copied to clipboard!