Pular para o conteúdo
Tutorial

Converta cores entre hexadecimal, RGB e HSL com uma chamada de API

| 5 min read

Envie uma cor como HEX, RGB ou HSL e obtenha todas as três representações em um POST. Crie tokens de design, normalize a entrada do CMS e gere escalas de tema sem uma biblioteca de cores.

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

A matemática de conversão de cores é o tipo de código que você escreve uma vez, erra sutilmente e copia entre projetos para sempre. Hex para RGB é simples; RGB para HSL é onde estão os erros ocasionais viver. Este ponto final pega uma cor em qualquer um dos três formatos e retorna todos os três de uma vez, então você para de carregar funções de conversão.

O pedido

A resposta fornece a string hexadecimal, um {`{ r, g, b }`} objeto e um {`{ h, s, l }`} objeto juntos:

O formato de entrada não importa. Passar rgb(62, 201, 151) ou uma string HSL e você obtém o mesmas três representações de volta. Hex funciona com ou sem o #:

Gere uma escala de token de design a partir de uma cor de marca

HSL é o formato que vale a pena construir. Como separa o matiz da luminosidade, você pode produzir um escala completa de tonalidade e sombra, mantendo o matiz e a saturação estáveis ​​e aumentando o valor de luminosidade. Converta o hexadecimal da sua marca em HSL uma vez e, em seguida, caminhe pela leveza para gerar a escala de 50 a 900. necessidades do sistema de design:

Execute isso em uma etapa de construção e grave a saída em um arquivo de variáveis ​​CSS. Você obtém uma coordenação paleta a partir de uma única cor de origem e alterar a cor da marca regenera toda a escala:

Precisa de uma paleta completa em vez de uma única conversão? O /v1/color/palette o ponto final pega uma cor base e retorna um conjunto coordenado de tons e cores complementares, para que você possa criar um tema em torno da cor de uma marca sem escolher cada amostra manualmente.

Normalizar cores coladas em um CMS

Os editores de conteúdo colam cores em qualquer formato que sua ferramenta de design exporte: um hexadecimal do Figma, um rgb() de uma ferramenta de captura de tela, um HSL de um trecho de CSS. Execute cada valor colado através do endpoint ao salvar e armazenar o hexadecimal normalizado. Seu código de renderização lida com um formato, e o editor continua colando o que for conveniente.

Onde cabe

Para matemática de UI interativa no navegador, uma função local é adequada. A API ganha seu lugar na construção etapas, backends e qualquer linguagem sem um pacote de cor sólida: uma única chamada HTTP substitui um dependência. A conversão de cores é um dos cerca de 200 terminais de uso único no botoi, todos atrás uma chave com 5 req/min grátis.

Experimente a conversão no playground interativo, navegue no documentação completa da API, ou conecte o Servidor MCP para converter cores diretamente do Claude ou do Cursor.

FAQ

Quais formatos de cores a API aceita e retorna?
Envie uma cor como HEX, RGB ou HSL e a resposta retornará todas as três representações de uma vez. Strings hexadecimais funcionam com ou sem o prefixo # inicial. Uma chamada fornece a string hexadecimal, um objeto {r, g, b} e um objeto {h, s, l}, para que você nunca escreva matemática de conversão manualmente.
Por que converter cores em uma API em vez de no navegador?
Para matemática única da interface do usuário, faça isso no navegador. A API ganha seu lugar nas etapas de construção e back-ends: gerando tokens de design no momento da construção, normalizando cores coladas em um CMS ou produzindo ativos temáticos no lado do servidor para onde você não deseja enviar uma biblioteca de cores. É uma única chamada HTTP de qualquer idioma, inclusive aqueles sem um bom pacote de cores.
Posso gerar uma paleta completa e não apenas converter uma cor?
Sim. O ponto final da cor/paleta pega uma cor base e retorna um conjunto coordenado de tons e cores complementares. Use color/convert quando tiver uma cor conhecida e precisar de suas outras representações, e color/palette quando tiver uma cor de marca e precisar de uma escala para construir um tema em torno dela.
Como os valores HSL ajudam na temática?
O HSL separa o matiz da saturação e da luminosidade, para que você possa criar uma escala de matiz e sombra mantendo o matiz e a saturação estáveis ​​​​e aumentando a luminosidade. É muito mais fácil raciocinar sobre isso do que cutucar três canais RGB. Converta o hexadecimal da sua marca em HSL uma vez e, em seguida, gere a escala de 50 a 900 calculando o valor da luminosidade.
O uso da API de cores é gratuito?
Sim. A conversão de cores segue o mesmo nível gratuito do restante do botoi: 5 solicitações por minuto sem necessidade de chave de API e limites mais altos em planos pagos. É um dos cerca de 200 endpoints de propósito único sob uma chave.

Comece a construir com botoi

150+ endpoints de API para consultas, processamento de texto, geração de imagens e utilitários para desenvolvedores. Plano gratuito, sem cartão de crédito.