Mescla pin light
#C0C0C0 por cima de #808080 resulta em #818181: os canais claros da camada de cima só elevam um pouco a base, de 128 para 129. A luz pontual mantém a base, a menos que a camada de cima seja bem mais escura ou mais clara. Grátis no seu navegador.
- Grátis
- Funciona no seu navegador
- Sem cadastro
- Seus dados não saem do seu aparelho
Executar grátis
Exemplo resolvido
- Base
- #808080
- Top
- #C0C0C0
- Hex
- #818181
- String RGB
- rgb(129, 129, 129)
- Modo R
- lighten
- Modo G
- lighten
Pin light é um modo clássico de mescla em composição que substitui cada canal de uma cor base por um valor mais escuro ou mais claro conforme a cor superior (de mescla). Quando um canal superior fica abaixo do cinza médio, o modo escurece: o resultado é o mínimo entre o canal base e o dobro do canal superior. Quando um canal superior está no cinza médio ou acima, o modo clareia: o resultado é o máximo entre o canal base e o dobro do canal superior menos duzentos e cinquenta e cinco. Designers, artistas de textura e engenheiros de pipeline recorrem ao pin light quando precisam de contraste seletivo nítido sem um editor de imagem completo: sobrepor uma máscara de realces, apertar sombras sob um painel de tom médio ou igualar prévias pin light do Photoshop em ferramentas de tema automatizadas. Esta capacidade aceita duas cores hex validadas, aplica a mesma regra determinística por canal em vermelho, verde e azul, e devolve a amostra mesclada como hex e RGB.
Como o pin light escolhe escurecer ou clarear em cada canal
O pin light trata a cor superior como uma superfície de decisão, não como uma simples proporção de mistura. Para cada canal no intervalo de zero a duzentos e cinquenta e cinco, compare o canal superior com o cinza médio (cento e vinte e oito). Se o canal superior for estritamente menor que cento e vinte e oito, a ramificação de escurecimento é executada: o dobro do canal superior vira um limite superior, e o resultado é o menor entre esse limite e o canal base.
Visualmente, isso puxa para baixo pixels base brilhantes onde a camada superior é uma sombra profunda. Se o canal superior for maior ou igual a cento e vinte e oito, a ramificação de clareamento roda: o dobro do canal superior menos duzentos e cinquenta e cinco vira um limite inferior, e o resultado é o maior entre esse limite e o canal base. Isso eleva pixels base escuros onde a camada superior é um realce brilhante.
Canais superiores em cinza médio ficam no limite e tendem a deixar os valores base praticamente intactos porque os envelopes de escurecer e clarear se encontram perto da base. A ordem importa: trocar base e top é outra operação, ao contrário de um lerp RGB de cinquenta por cento.
Contrato de entrada, campos de resposta e erros de validação
Cada valor deve ser uma cor hexadecimal de três ou seis dígitos com prefixo opcional hash ou zero-x. Cores nomeadas CSS e strings rgb entre parênteses estão fora do escopo: normalize-as a montante. Falhas de validação não são cobradas.
Use hex quando precisar de um único token para arquivos de tema; use rgb quando código de canvas ou ferramentas de acessibilidade esperarem canais separados; use os rótulos mode_* ao ensinar ou depurar qual ramificação disparou com uma cor superior de cinza e tinta misturados.
Fluxos de trabalho, preços e diferenças em relação a outras ferramentas de cor
Use a mescla pin light gratuita no navegador para checagens rápidas de máscara, experimentos de sobreposição de logotipo e prévias de textura sem instalar uma suíte de desktop. Pin light é a intenção de busca correta quando o usuário digita modo de mescla pin light, pin light duas cores ou Photoshop pin light hex — essas consultas não são atendidas por um misturador genérico.
Mantenha as requisições em duas strings hex, evite enviar cores nomeadas sem conversão e documente que base é a camada inferior para que a equipe nunca inverta a ordem por acidente. Autores que mapeiam SDKs podem exibir hex e os três rótulos de modo ao lado de seletores de cor que estudantes e designers de produção já esperam.
Casos de uso
Sobreposições seletivas de realces e sombras
Componha uma cor de painel de tom médio sob um hex de máscara superior para que canais escuros aprofundem sombras e canais claros reforcem realces sem um editor de imagem completo.
Ajuste de materiais de jogo e interface
Autores de material mesclam um token de albedo base com uma cor superior de dica de iluminação para gerar amostras de acento pin light em skins de HUD e paletas de props.
Perguntas frequentes
Como o pin light mescla duas cores?
Para cada canal RGB, se top for menor que 128 o resultado é min(base, 2×top) (darken); se top for 128 ou maior, max(base, 2×top−255) (lighten). Envie base e top como hex.
Qual é a diferença entre base e top?
Base é a cor da camada inferior. Top é a cor de mescla que escolhe escurecer ou clarear por canal. A ordem importa; trocá-las produz outro resultado.
O que acontece se eu enviar um código hex inválido?
Ambas as cores devem ser hexadecimais de 3 ou 6 dígitos (# opcional). Comprimento incorreto ou dígitos não hex são rejeitados e não cobrados.
A mescla pin light é grátis?
A ferramenta do navegador roda grátis no seu dispositivo.
Isso é o mesmo que color.mix?
Não. color.mix faz um lerp RGB linear por ratio. Pin light nunca usa ratio: só o canal top escolhe escurecer ou clarear. Algoritmo e intenção de busca diferentes.
Ferramentas relacionadas
Para desenvolvedores — acesso via API
Tudo nesta página está disponível via API. Esta seção é para equipes que querem integrar a ferramenta aos próprios sistemas; quem não precisa disso pode simplesmente usar a ferramenta acima.
Endpoint
Autenticação por token Bearer. Um único POST coloca a tarefa na fila; o resultado chega por webhook ou link assinado.
Chame do seu código
curl -X POST https://api.kit.forhosting.com/color/pin-light \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"base":"#808080","top":"#C0C0C0"}'const res = await fetch("https://api.kit.forhosting.com/color/pin-light", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"base": "#808080",
"top": "#C0C0C0"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/pin-light",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"base": "#808080",
"top": "#C0C0C0"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/pin-light", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"base":"#808080","top":"#C0C0C0"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"base":"#808080","top":"#C0C0C0"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/pin-light", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemplo de requisição
{
"base": "#808080",
"top": "#C0C0C0"
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.pin_light",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}A API é assíncrona: cada chamada devolve um task_id na hora. Se preferir polling, consulte o status a até 1 requisição por segundo.
Preço
Preço publicado, sem tokens nem créditos escondidos. Tarefa que falha não é cobrada.
Erros
| HTTP | Código | O que significa |
|---|---|---|
401 | unauthorized | Token ausente ou inválido. Confira o header Authorization. |
402 | insufficient_balance | Saldo insuficiente para esta tarefa. Faça uma recarga e tente de novo. |
404 | unknown_type | Esse tipo de tarefa não existe. Confira o campo type no catálogo. |
429 | rate_limited | Muitas requisições em pouco tempo. Espere um instante e tente de novo. |
Notas técnicas
Entradas inválidas ou ausentes falham com invalid_input para que scripts nunca enviem uma cor errada em silêncio. O caminho gratuito do navegador e a API pré-paga compartilham um único módulo puro, de modo que os goldens permanecem idênticos bit a bit a US$ 0,002 por item bem-sucedido.
Como o pin light escolhe escurecer ou clarear em cada canal
O algoritmo é aritmética pura, sem rede, sem semente aleatória e sem relógio de parede, de modo que entradas idênticas sempre produzem o mesmo JSON.
Contrato de entrada, campos de resposta e erros de validação
Envie um corpo JSON com dois campos de string obrigatórios: base (a camada inferior) e top (a camada de mescla que seleciona escurecer ou clarear). Os aliases color1, bottom, hex1, from e background mapeiam para base; color2, blend, hex2, to e foreground mapeiam para top, de modo que campos de formulário antigos e o vocabulário de ferramentas de design se conectam com clareza. Em caso de sucesso, a carga útil ecoa base e top em hex normalizado, os objetos de canal base_rgb e top_rgb, o hex mesclado, rgb como inteiros r g b, rgb_string para colar em CSS, mode_r mode_g e mode_b como as palavras darken ou lighten por canal, e method sempre igual a pin_light para que clientes possam ramificar sem inspecionar formas. Base ausente, top ausente, strings vazias, dígitos não hex e comprimentos incorretos falham com invalid_input; as mensagens nomeiam o campo para que a validação do formulário destaque o controle exato.
Fluxos de trabalho, preços e diferenças em relação a outras ferramentas de cor
Use a API pré-paga quando um pipeline de design system, um gerador de materiais de jogo, um serviço de amostras de e-commerce ou um bot de ativos de marketing precisar de um contrato estável sob saldo KIT a US$ 0,002 por item bem-sucedido. Combine este endpoint com color.mix quando precisar de um lerp por ratio em vez de escurecer ou clarear seletivo, com color.mix_subtractive quando quiser lama tipo tinta RYB, e com color.lighten ou color.darken quando apenas uma cor deva deslocar-se por porcentagem.
Casos de integração
Igualar prévias pin light do Photoshop em CI
Pipelines de tema e textura chamam a API para que builds automatizados reproduzam o mesmo hex pin light que o designer viu no Photoshop, idêntico bit a bit em cada execução.