Compartilhar via


CSS Seletor de cores

Oseletor de cor de CSSpermite inserir valores de cor em Propriedades de cor CSS . Ele inclui uma paleta padrão de cores e usa nomes de cores padrão, códigos de hash, os valores de cor RGB, HSL, a RGBA e HSLA e exibe uma lista das cores usadas mais recentemente. Por padrão, o seletor de cor insere valores hexadecimais. Para alterar essa configuração, consulte Formato, CSS, Editor de texto, caixa de diálogo Opções.

Escolher uma cor

O seletor de cor tem uma barra de cores e uma tela de cores. A barra de cores sempre é acessada pela primeira vez.

Para exibir a barra de cores

  • Digite qualquerpropriedade CSSque leva a um valor de cor (por exemplo, cores:, rgb (, rgba (, hsl (, hsla (, ou#).

  • Para acessar a barra de cores com o teclado, coloque o cursor em uma cor existente na folha de estilos e pressione Ctrl-J ou Ctrl-espaço.

Em uma folha de estilosde branco, a barra de cores exibe um palete padrão. Em uma folha de estilos com as cores existentes, a barra de cores exibe uma lista das cores usadas mais recentemente.

Para escolher uma cor da barra de cores

  1. Clique em uma das cores na barra de cores, ou pressione a seta para baixo para inserir a barra de cores e, em seguida, use as teclas de seta para a esquerda e seta para a direita para selecionar uma cor.

    Na folha de estilos, os valores de propriedade serão alterado à medida que você escolher cores diferentes.

  2. Para ver mais cores, clique em esquerda e direita setas na barra de cores ou use a seta teclas para mover a esquerda e direita na barra de cores.

  3. Pressione ENTER para atribuir a cor que você escolheu a cor de CSS propriedade.

Para escolher uma cor personalizada a partir da tela de cores

  1. Para exibir a tela de cores, escolha o sinal de adição (+) na extremidade direita da barra de cores ou pressione a para baixo tecla de direção no teclado, uma ou duas vezes quando a barra de cores está visível.

  2. Siga um ou mais destes procedimentos.

    • Use o mouse para selecionar uma cor na tela.

    • Altere a cor movendo o controle deslizante à direita, para cima ou para baixo.

    • Altere a opacidade movendo o controle deslizante na parte inferior esquerda ou direita. Valores serão inseridos no formato RGBA ou HSLA.

    • Escolha Selecionar para alterar o ponteiro para uma ferramenta conta-gotas. A cor escolhida será visualizada enquanto você move o ponteiro.

    Conforme você altera as cores com qualquer um desses métodos, a cor original exibe o Original caixa, a cor escolhida é exibida no novo caixa e o valor da cor CSS propriedade é visualizado na folha de estilos.

  3. Pressione ENTER para atribuir a cor que você escolheu a cor de CSS propriedade.

Dica

A cor escolhida é exibida, usando as configurações de vídeo do seu monitor e pode parecer diferente em outro monitor.

  • Novo
    Exibe a cor selecionada na caixa de diálogo, mas que ainda não foi atribuída à regra de CSS .

  • Original
    Exibe a cor atualmente atribuído à regra de CSS .

  • Opacidade
    Deslize o botão para a direita para aumentar a opacidade da cor, ou para a esquerda para diminuir ele.

    Dica

    Como não há nenhuma representação de opacidade no formato padrão hexadecimal, o seletor de cor digitará valores RGBA ou HSLA ao ajustar a opacidade.

  • Escolha
    Alterações o ponteiro para uma ferramenta de conta-gotas que permite que você selecione qualquer cor na tela e, em seguida, atribuir -la a umapropriedadede CSS. Enquanto move o ponteiro sobre a tela, a cor correspondente à localização do ponteiro será visualizada na New as alterações de propriedade na folha de estilosde cores de caixa e o valor CSS relevantes.

Consulte também

Referência

Formato, CSS, Editor de texto, caixa de diálogo Opções