O que é um Gerador de Tons de Cor?
Um gerador de tons de cores pega uma cor base e constrói uma escala monocromática de versões mais claras e escuras dela A partir de uma única entrada como #4466EE, produz uma fileira de tons que se aproxima do branco, uma fileira de tons que se aproxima do preto e uma fileira de tons que se aproxima do cinza Cada amostra é uma cor real que você pode copiar como HEX, RGB ou HSL e soltar diretamente em CSS, um arquivo de design ou uma configuração de tema.
As três escalas vêm das definições clássicas usadas na teoria das cores Uma tonalidade é a cor base misturada com branco, que aumenta sua leveza mantendo a mesma tonalidade Uma tonalidade é a base misturada com preto, que escurece Um tom é a base misturada com cinza, que reduz sua intensidade e dá uma versão silenciada e mais sofisticada da cor Ter todos os três de uma entrada é o que permite construir uma paleta coerente: um botão e seu estado de pairar, um conjunto de séries de gráficos ou as superfícies claras e escuras de uma interface, todas derivadas de uma única cor de marca.
O gerador é executado inteiramente no seu navegador A cor que você insere é analisada e as escalas são computadas com JavaScript do lado do cliente, então nada é carregado, não há conta e seu trabalho nunca é rastreado Ele aceita HEX, rgb (), hsl () e nomes de cores CSS comuns, permite definir quantas etapas cada escala contém e atualiza cada amostra instantaneamente Uma vez que a página tenha carregado, ela funciona offline.
Como usar o Gerador de Tons de Cor?
Insira uma cor base
Digite ou cole uma cor em qualquer sintaxe comum: um código HEX como #4466EE, um valor rgb () ou hsl () ou um nome de cor CSS, como cerceta.
Defina o número de passos
Escolha quantas variações cada escala deve conter Mais etapas dão um gradiente mais fino da base em direção ao branco, preto ou cinza.
Revise as tonalidades, tons e tons
A ferramenta mostra três escalas lado a lado, cada amostra rotulada com seu valor HEX e a porcentagem misturada em direção à cor alvo.
Copie a cor que você precisa
Clique em qualquer amostra para copiar seu valor Alterne o formato de cópia entre HEX, RGB e HSL para corresponder à sintaxe que seu projeto espera.
Principais características
Tons, Tons e Tons
Uma cor base produz três escalas completas ao mesmo tempo: tons mais claros, tons mais escuros e tons suaves em direção ao cinza.
Cada valor copiável
Cada amostra está disponível como HEX, RGB e HSL, para que você possa colá-la diretamente no CSS, em uma ferramenta de design ou em um arquivo de tema.
Passos Ajustáveis
Defina de 2 a 20 passos por escala para controlar o quão fino o gradiente está entre a cor base e branco, preto ou cinza.
Perdoando a entrada
Aceita valores HEX de 3 e 6 dígitos, rgb () e hsl () e nomes de cores CSS comuns, todos normalizados para as mesmas amostras.
Frequently Asked Questions
Related Tools
Color Contrast Checker
Check the contrast ratio between a text color and its background against WCAG 2.2 AA and AAA thresholds, with a live preview and one-click accessible-color suggestions.
Color Converter
Convert color codes between HEX, RGB, HSL, HWB, and CMYK instantly
Color Mixer
Blend two colors with adjustable ratio and blend modes, and build a gradient between them
Color Palette Generator
Generate harmonious color palettes from any base color - shades and tints, complementary, analogous, triadic, and monochromatic - with HEX codes you can copy and a CSS variables export.
Comments
0 comments
No comments yet. Be the first to share your thoughts!