:root {
--color-100: #d0d9fb;
--color-200: #8aa0f4;
--color-300: #4466ee;
--color-400: #4466ee;
--color-500: #0f2da3;
--color-600: #0a1c67;
--color-700: #050f38;
}O gerador de paleta de cores transforma uma única cor de base em um conjunto coordenado de cores usando as regras de harmonia de rodas coloridas. Escolha uma cor inicial e escolha um modo — tons e tons, monocromático, complementar, análogo, triádico ou tetradico — e a ferramenta calcula uma paleta balanceada com o valor hexadecimal, RGB e HSL para cada amostra.
Boas combinações de cores seguem relações previsíveis na roda de cores HSL: cores complementares se sentam umas com as outras, cores análogas se sentam umas das outras e as cores triádicas são espaçadas uniformemente. Resolver isso manualmente significa fazer malabarismos com os ângulos de matiz e os valores de leveza. Esta ferramenta faz as contas instantaneamente e mostra o resultado para que você possa escolher um esquema que funcione.
Tudo é executado no seu navegador. Ajuste a cor de base, os modos de troca, clique em qualquer amostra para copiar seu valor ou exporte a paleta inteira como propriedades personalizadas do CSS. Sem conta, sem uploads e ele continua funcionando offline depois que a página é carregada.
Use o seletor de cores ou digite um valor hexadecimal para definir a cor em que sua paleta é construída.
Alternar entre tons e tons, monocromático, complementar, análogo, triádico e tetradico para ver diferentes esquemas coordenados.
Cada amostra mostra seu valor hexadecimal, RGB e HSL. Clique em uma amostra para copiá-la ou copie toda a paleta como propriedades personalizadas do CSS.
Use as cores geradas para fundos, acentos e texto em seu design ou folha de estilo, mantendo a harmonia consistente em sua interface do usuário.
Esquemas e tons, monocromáticos, complementares, análogos, triádicos e tétrades.
Cada amostra mostra todos os três formatos, para que você possa soltar o valor certo diretamente em CSS, ferramentas de design ou código
Exporte a paleta inteira como: propriedades personalizadas do root, pronta para colar em sua folha de estilo como uma escala de token de design
As harmonias são computadas em HSL para que as cores fiquem uniformemente espaçadas e os passos de leveza parecem equilibrados, não enlameados
Pick colors and convert between HEX, RGB, and HSL formats
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.
Create beautiful CSS gradients with live preview
0 comments
No comments yet. Be the first to share your thoughts!