Ir al contenido
Tutorial

Convierta colores entre hexadecimal, RGB y HSL con una llamada API

| 5 min read

Envíe un color como HEX, RGB o HSL y recupere las tres representaciones en una POST. Cree tokens de diseño, normalice la entrada de CMS y genere escalas de temas sin una biblioteca de colores.

Code editor generating color design tokens from a brand color
Photo by Safar Safarov on Unsplash

Las matemáticas de conversión de color son el tipo de código que se escribe una vez, se equivoca sutilmente y se copia entre proyectos para siempre. Hex a RGB es sencillo; RGB a HSL es donde los errores se desvían por un grado vivir. Este punto final toma un color en cualquiera de los tres formatos y devuelve los tres a la vez, por lo que Dejas de llevar funciones de conversión.

la solicitud

La respuesta te da la cadena hexadecimal, una {`{ r, g, b }`} Objeto, y una {`{ h, s, l }`} objeto juntos:

El formato de entrada no importa. Aprobar rgb(62, 201, 151) o una cadena HSL y obtienes el mismas tres representaciones atrás. Hex funciona con o sin el #:

Genere una escala de token de diseño a partir de un color de marca

HSL es el formato sobre el que vale la pena construir. Debido a que separa el tono de la luminosidad, puedes producir una escala completa de tintes y sombras manteniendo estables el tono y la saturación y aumentando el valor de luminosidad. Convierta el hexadecimal de su marca a HSL una vez, luego camine por la ligereza para generar una escala de 50 a 900. necesidades del sistema de diseño:

Ejecútelo en un paso de compilación y escriba el resultado en un archivo de variables CSS. Obtienes una coordinación paleta a partir de un único color de origen y cambiar el color de la marca regenera toda la escala:

¿Necesita una paleta completa en lugar de una única conversión? El /v1/color/palette El punto final toma un color base y devuelve un conjunto coordinado de tonos y colores complementarios. para que puedas crear un tema en torno al color de una marca sin tener que escoger cada muestra a mano.

Normalizar colores pegados en un CMS

Los editores de contenido pegan colores en cualquier formato que exporte su herramienta de diseño: un hexadecimal de Figma, un rgb() desde una herramienta de captura de pantalla, un HSL de un fragmento de CSS. Ejecute cada valor pegado a través del punto final al guardar y almacenar el hexadecimal normalizado. Su código de renderizado luego trata con uno formato, y el editor sigue pegando lo que sea conveniente.

donde encaja

Para matemáticas de interfaz de usuario interactivas en el navegador, una función local está bien. La API se gana su lugar en la construcción pasos, backends y cualquier idioma sin un paquete de color sólido: una sola llamada HTTP reemplaza una dependencia. La conversión de color es uno de los aproximadamente 200 puntos finales de propósito único en botoi, todos detrás una llave con 5 req/min gratis.

Pruebe la conversión en el parque infantil interactivo, navegar por el documentos API completos, o conectar el servidor MCP para convertir colores directamente desde Claude o Cursor.

FAQ

¿Qué formatos de color acepta y devuelve la API?
Envíe un color como HEX, RGB o HSL y la respuesta devolverá las tres representaciones a la vez. Las cadenas hexadecimales funcionan con o sin el prefijo # inicial. Una llamada te proporciona la cadena hexadecimal, un objeto {r, g, b} y un objeto {h, s, l}, por lo que nunca escribes las matemáticas de conversión a mano.
¿Por qué convertir colores a través de una API en lugar de hacerlo en el navegador?
Para cálculos de interfaz de usuario únicos, hágalo en el navegador. La API gana su lugar en los pasos de construcción y en los backends: generar tokens de diseño en el momento de la construcción, normalizar los colores pegados en un CMS o producir activos temáticos en el lado del servidor donde no desea enviar una biblioteca de colores. Es una única llamada HTTP desde cualquier idioma, incluidos aquellos que no tienen un buen paquete de colores.
¿Puedo generar una paleta completa, no solo convertir un color?
Sí. El punto final de la paleta de colores toma un color base y devuelve un conjunto coordinado de tonos y colores complementarios. Utilice color/convertir cuando tenga un color conocido y necesite sus otras representaciones, y color/paleta cuando tenga un color de marca y necesite una escala para crear un tema en torno a él.
¿Cómo ayudan los valores HSL con la tematización?
HSL separa el tono de la saturación y la luminosidad, por lo que puede crear una escala de tintes y sombras manteniendo estables el tono y la saturación y aumentando la luminosidad. Es mucho más fácil razonar sobre eso que empujar tres canales RGB. Convierta el hexadecimal de su marca a HSL una vez, luego genere la escala de 50 a 900 recorriendo el valor de luminosidad.
¿La API de color es de uso gratuito?
Sí. La conversión de color se encuentra detrás del mismo nivel gratuito que el resto de botoi: 5 solicitudes por minuto sin necesidad de clave API y límites más altos en los planes pagos. Es uno de los aproximadamente 200 puntos finales de propósito único bajo una sola clave.

Empieza a construir con botoi

150+ endpoints de API para consultas, procesamiento de texto, generacion de imagenes y utilidades para desarrolladores. Plan gratuito, sin tarjeta de credito.