CCalcBOX
🌐JA
🎨

Color Studio

Color conversion, palette generation, and CSS gradient builder in one. WCAG compliant.

R
G
B
rgb(59, 130, 246)
H
S
L
hsl(217, 91%, 60%)
C
M
Y
K
cmyk(76%, 47%, 0%, 4%)

About Color Studio

Color Converter: Convert colors between HEX, RGB, HSL, and CMYK formats with a live preview and color picker.

Palette Generator: Create harmonious color palettes from a base color. Supports complementary, analogous, triadic, split-complementary, and monochromatic schemes. Includes WCAG contrast checking and CSS variable export.

Gradient Builder: Build linear, radial, and conic CSS gradients with 2-5 color stops. Adjust angles, use presets, and copy the CSS code.

📖How to Use
  1. 1Use the color picker or enter a HEX, RGB, or HSL value
  2. 2Instantly convert between different color formats
  3. 3Check contrast ratio and generate color palettes
💡Tips & Knowledge
  • WCAG accessibility guidelines recommend a contrast ratio of at least 4.5:1 (AA level)
  • Complementary colors (hue +180°) maximize visibility; analogous colors (±30°) create harmony
  • Copy HEX codes directly from Figma or Adobe XD and paste them in

🔗 Related Tools

All calculations run in your browser. No data is sent to any server.