UTILSBOX⚡TODAS AS FERRAMENTAS54+
JSON.FORMATSuite completa para formatar, validar, minificar, comparar e converter JSON.//REGEX.TESTERTestador de expressões regulares em tempo real com explicação e substituição.//PDF.SUITEUnir, dividir, extrair texto, girar e converter páginas de PDF em imagens.//IMAGE.STUDIOEditor de fotos no navegador: corte, filtros, WebP, PNG e codificador Base64.//HTML.BEAUTIFYFormatador de código HTML, minificador para produção e codificador de entidades.//CSS.MINIFYFormatador de CSS, minificador para produção e conversor CSS para SCSS.//SQL.FORMATTERFormatador de consultas SQL, tradutor entre dialetos e minificador.//SVG.EXCALIDRAWEditor visual vetorial interativo com Excalidraw e formatador SVG.//TEXT.DIFFContador de palavras, caracteres, tempo de leitura e comparador Diff.//YAML.CONVERTValidador e formatador bidirecional de YAML e JSON com verificação de sintaxe.//XML.PARSERFormatador de documentos XML, inspetor de árvore e conversor para JSON.//GRAPHQL.STUDIOFormatador de queries e schemas SDL, minificador e ordenação de campos AST.//BASE64.CODECCodificador e decodificador Base64 e URL-Safe com suporte total a UTF-8.//LOREM.IPSUMGerador de texto de preenchimento para mockups, protótipos e testes de UI.//PASSWORD.GENGerador de senhas seguras e aleatórias com medidor de entropia.//URL.STUDIOSuite com 8 ferramentas: encode, decode, validador, parser e construtor.//QR.STUDIOCriador de códigos QR personalizados com logotipos, cores e gradientes.//ASCII.EXPLORERTabela interativa ASCII 0-255, atalhos de teclado Alt e símbolos CP437.//KEYCODES.LIVEDetector em tempo real de KeyboardEvent e tabela de keycodes JavaScript.//JWT.DEBUGGERDecodificador de tokens JWT, inspeção de claims e verificação de assinatura.//BINARY.CODECConversor bidirecional de texto para binário com efeito Matrix e tabela ASCII.//CHARTS.STUDIOGerador de gráficos interativos (barras, linhas, pizza) a partir de CSV.//UUID.V7Gerador em massa de UUID v4, v7 ordenado no tempo, v1 e validador.//CSV.JSONConversor bidirecional de CSV para JSON com delimitadores e visualização em tabela.//COLORS.STUDIOConversor HEX/RGB/HSL/CMYK, harmonias de paleta e teste de contraste WCAG.//SEO.METAGerador de Meta Tags, Open Graph e pré-visualização ao vivo do Google SERP.//SCHEMA.JSONLDGerador de dados estruturados Schema.org JSON-LD para Google Rich Snippets.//SITEMAP.XMLGerador de sitemaps XML padrão (Protocolo 0.9) para Google e Bing.//ROBOTS.TXTGerador de robots.txt, bloqueio de bots de IA e testador de rotas.//FAKE.DATAGerador de dados fictícios e sintéticos: exporte para JSON, CSV, SQL e TypeScript.//CLOCK.WORLDRelógio mundial em tempo real com globo 3D holográfico e fusos horários.//DATE.CALCDias entre datas, idade exata, dias úteis, timestamp Unix e parser cron.//CALC.SUITESuite com 56+ calculadoras: porcentagem, hipoteca, empréstimos, IVA, IMC e salários.//JSON.FORMATSuite completa para formatar, validar, minificar, comparar e converter JSON.//REGEX.TESTERTestador de expressões regulares em tempo real com explicação e substituição.//PDF.SUITEUnir, dividir, extrair texto, girar e converter páginas de PDF em imagens.//IMAGE.STUDIOEditor de fotos no navegador: corte, filtros, WebP, PNG e codificador Base64.//HTML.BEAUTIFYFormatador de código HTML, minificador para produção e codificador de entidades.//CSS.MINIFYFormatador de CSS, minificador para produção e conversor CSS para SCSS.//SQL.FORMATTERFormatador de consultas SQL, tradutor entre dialetos e minificador.//SVG.EXCALIDRAWEditor visual vetorial interativo com Excalidraw e formatador SVG.//TEXT.DIFFContador de palavras, caracteres, tempo de leitura e comparador Diff.//YAML.CONVERTValidador e formatador bidirecional de YAML e JSON com verificação de sintaxe.//XML.PARSERFormatador de documentos XML, inspetor de árvore e conversor para JSON.//GRAPHQL.STUDIOFormatador de queries e schemas SDL, minificador e ordenação de campos AST.//BASE64.CODECCodificador e decodificador Base64 e URL-Safe com suporte total a UTF-8.//LOREM.IPSUMGerador de texto de preenchimento para mockups, protótipos e testes de UI.//PASSWORD.GENGerador de senhas seguras e aleatórias com medidor de entropia.//URL.STUDIOSuite com 8 ferramentas: encode, decode, validador, parser e construtor.//QR.STUDIOCriador de códigos QR personalizados com logotipos, cores e gradientes.//ASCII.EXPLORERTabela interativa ASCII 0-255, atalhos de teclado Alt e símbolos CP437.//KEYCODES.LIVEDetector em tempo real de KeyboardEvent e tabela de keycodes JavaScript.//JWT.DEBUGGERDecodificador de tokens JWT, inspeção de claims e verificação de assinatura.//BINARY.CODECConversor bidirecional de texto para binário com efeito Matrix e tabela ASCII.//CHARTS.STUDIOGerador de gráficos interativos (barras, linhas, pizza) a partir de CSV.//UUID.V7Gerador em massa de UUID v4, v7 ordenado no tempo, v1 e validador.//CSV.JSONConversor bidirecional de CSV para JSON com delimitadores e visualização em tabela.//COLORS.STUDIOConversor HEX/RGB/HSL/CMYK, harmonias de paleta e teste de contraste WCAG.//SEO.METAGerador de Meta Tags, Open Graph e pré-visualização ao vivo do Google SERP.//SCHEMA.JSONLDGerador de dados estruturados Schema.org JSON-LD para Google Rich Snippets.//SITEMAP.XMLGerador de sitemaps XML padrão (Protocolo 0.9) para Google e Bing.//ROBOTS.TXTGerador de robots.txt, bloqueio de bots de IA e testador de rotas.//FAKE.DATAGerador de dados fictícios e sintéticos: exporte para JSON, CSV, SQL e TypeScript.//CLOCK.WORLDRelógio mundial em tempo real com globo 3D holográfico e fusos horários.//DATE.CALCDias entre datas, idade exata, dias úteis, timestamp Unix e parser cron.//CALC.SUITESuite com 56+ calculadoras: porcentagem, hipoteca, empréstimos, IVA, IMC e salários.//
MÓDULO 05 · DESIGN & PALETAS

Color Studio & Harmonias

Suíte avançada de cores com conversão HEX, RGB, HSL, CMYK, validador de contraste WCAG 2.1 e gerador de paletas harmônicas.

Alpha: 100%
PRESETS CYBERPUNK:
HEX#00F6FF
RGBrgb(0, 246, 255)
RGBArgba(0, 246, 255, 1)
HSLhsl(182, 100%, 50%)
HSLAhsla(182, 100%, 50%, 1)
CMYKcmyk(100%, 4%, 0%, 0%)

HARMONIAS CROMÁTICAS

COMPLEMENTAR (180°)
ANÁLOGAS (±30°)
TRIÁDICA (120°)
TETRÁDICA (90°)
ESCALA DE LUMINOSIDADE (15% - 90%)

VALIDADOR DE CONTRASTE WCAG 2.1

EM FUNDO BRANCO (#FFFFFF)
1.34:1
Aa Text Preview Sample
AA Normal FAILAAA Normal FAIL
EM FUNDO ESCURO (#0E0C1A)
14.39:1
Aa Text Preview Sample
AA Normal PASSAAA Normal PASS

Guia Completo: Espaços de Cor, Conversão e Acessibilidade

1. O que são espaços de cor (HEX, RGB, HSL, CMYK)?

Modelos matemáticos de luz. RGB/HEX para telas digitais, HSL para percepção intuitiva e CMYK para impressão física.

2. Padrão WCAG 2.1 e Relações de Contraste

As diretrizes WCAG exigem contraste mínimo de 4.5:1 para texto padrão (Nível AA) e 7:1 para Nível AAA.

3. Harmonias de Cor

Relações geométricas no círculo cromático que geram combinações atraentes.

4. CSS Moderno: OKLCH e color-mix()

OKLCH corrige distorções de brilho de HSL para gradientes uniformes.

Perguntas Frequentes (FAQs)

Por que usar HSL no CSS?

Permite criar temas claro/escuro facilmente ajustando apenas a luminosidade.

Como é calculado o contraste?

Pela razão de luminância relativa (L1 + 0.05) / (L2 + 0.05) segundo a W3C.

FERRAMENTAS DE DESIGN RELACIONADAS:

CSS Formatter & Minifier →SVG Studio & Excalidraw →Image Editor & Converter →