Color & UI Lab
PRO
PHP • 30+ Themes • Safe Code
🖼️ Image Picker
🎡 Wheel
🎚️ RGBA
🧠 HTML→CSS
🛠️ Dev Tools
🖼️ Image Color Picker
upload • drag&drop • paste
sin imagen
⬆️ Select Image
🧽 Limpiar
Scale Image
100%
125%
150%
175%
200%
↑
↓
←
→
mover
Enter
guardar
x=0, y=0
🔎 Zoom + Datos
global #7cf0ff
Nombre (opcional)
HEX
📋
RGB
📋
HSL
📋
CMYK
📋
➕ Guardar color
🎯 Usar como global
🧹 Borrar paleta
Name + Hex
Solo Hex
CSS Variables
⬇️ Export
🎡 Color Wheel Picker
hsl(0, 100%, 50%)
Click y arrastra
#ff0000
HEX
📋
RGBA
📋
Lightness
Alpha
Usar como global
Guardar en paleta
Optimizado para mejor rendimiento.
🧪 Harmonías
click = global
Guardar armonía
🎚️ RGBA Studio
rgba(47, 139, 158, 1)
Hue
Alpha
R
G
B
A
HEX
📋
RGBA()
📋
Usar como global
Guardar en paleta
Alpha no es “transparencia”. Alpha es mood.
🧷 Tokens rápidos
CSS vars
Tokens basados en tu color global.
📋 Copiar tokens
♻️ Regenerar
🧠 HTML → Smart Theme CSS (30+ Styles)
Intelligent Analysis
🎁 Cargar Demo
Seleccionar Estilo
🎲 Regenerar Random
HTML (input)
⚡ Generar CSS
👀 Preview
CSS generado (output)
📋 Copiar CSS
⬇️ Descargar .css
Preview
Paleta sugerida desde global
* Nav detectado: Botones Flexbox
* Tabla detectada: Estilos Zebra
* Img detectada: Responsiva
Guardar paleta
Primary → Global
🔘 Border Radius
Top-Left
Top-Right
Bottom-Right
Bottom-Left
CSS
📋
📦 Flexbox Generator
Justify Content
Start
Center
End
Between
Around
Align Items
Stretch
Center
Start
End
CSS
📋
🌫️ Text Shadow
X
Y
Blur
Color
Shadow
CSS
📋
🔄 Transform 2D
Rotate (deg)
Scale
Skew X (deg)
CSS
📋
✂️ Clip Path
Forma
Triangle
Diamond
Trapezoid
Arrow Left
Star
Circle
CSS
📋
🌈 Gradient Maker
Color A
Color B
Ángulo
Tipo
linear-gradient
radial-gradient
CSS
📋
🧱 Shadow Builder
Offset X
Offset Y
Blur
Spread
Alpha
Color (hex)
CSS
📋
⚖️ Contrast Checker
Texto
Fondo
Texto de prueba
Subtítulos, botones, labels…
ratio: 1.00
—
📝 Lorem Ipsum
Generator
Párrafos
Generar
📋