UNIVERSIDADE FEDERAL DE JUIZ DE FORA – UFJF Centro de Gestão do Conhecimento Organizacional – CGCOEquipe de Desenvolvimento de Sites

Manual do UsuárioCMS WordPress

Versão 4.2.2

1- Introdução

O Centro de Gestão do Conhecimento Organizacional, CGCO, criou, em março de 2008, uma equipe para atender à demanda de criação de novos sites para a Universidade Federal de Juiz de Fora, UFJF, oferecendo um serviço em que o usuário tenha autonomia para administrar todo conteúdo do site, de maneira simples e fácil. Esse serviço facilita a padronização, o controle e a manutenção dos sites hospedados na UFJF, acabando com a dependência de empresas externas, o que implica também em economia para a Universidade. Outro fator a destacar é a melhoria da segurança em termos de hospedagem de sites, com equipamentos mais modernos, backups automatizados e constante acompanhamento das novas versões dos programas, com o objetivo de beneficiar essa melhoria. A Equipe de Desenvolvimento de Sites realizou um estudo sobre as ferramentas de gerenciamento de conteúdo existentes, em softwarelivre, e que pudessem atender a todas as especificações levantadas pela equipe. A ferramenta escolhida foi WordPress, a qual é apresentada abaixo.

2 - Tela de Entrada

Para acessar o painel administrativo do site, deve-se digitar no browser (navegador) o seguinteendereço:

Onde “seusite” é o nome escolhido no ato de sua requisição.

Em seguida, aparecerá a tela de login para acesso ao conteúdo do site, onde deve ser inserido o“Nome de usuário” e a “Senha”.

Outubro/2015 – Página 1

http://www.ufjf.br/seusite/wp-admin/

No topo dessa primeira tela, há uma barra de acesso rápido às funcionalidades do sistema, bem como o nome do site que está sendo administrado e a opção de perfil de usuário (identificada noexemplo por “Olá, cgco”).

Outubro/2015 – Página 2

Ao término das edições do site, é importante sair do sistema. Para isso, clique na opção de perfildo usuário e depois em “Sair”, conforme a figura acima.

Do lado esquerdo, há um menu de acesso a todas funcionalidades, e que possui um sistema diferenciado para visualização dos itens.

Conforme mostrado no exemplo acima, ao passar o mouse no item “Posts” do menu principal, é exibido um outro menu do lado direito, que, ao ser clicado, expande-se para baixo.

No fim do menu principal, existe o botão “Recolher Menu”. Ele reduz todos os itens a ícones.

No canto superior direito, aparecem as “Opções de Tela”. Ao serem desmarcadas, permite que os itens correspondentes não apareçam nas telas do gerenciador.

Outubro/2015 – Página 3

3 - Mudança de Senha

Para alteração de senha, basta ir na barra superior e clicar em “Olá, nome do usuário” e, em seguida, “Editar Meu Perfil”. Uma outra opção é acessar “Usuários” no menu à esquerda e, em seguida, “Seu perfil”.

Ao final da tela de configurações do perfil, preencher duas vezes o campo “Nova senha”. Em seguida, clicar no botão “Atualizar perfil”.

Outubro/2015 – Página 4

4 - Imagem principal (logo)

Pode ser modificada através do menu “Ferramentas -> Imagem principal (NOVO)”, com uma imagem em formato .jpg, dimensões de 1024 x 100 pixels e, no máximo, 1 Mb de tamanho.

Outubro/2015 – Página 5

5 - Páginas

5.1 - Criar nova página

Para criar uma nova página, clicar no menu à esquerda em “Páginas” e no submenu “Adicionar nova”.

Inserir título e conteúdo, através do editor, conforme figura acima. Para somente salvar, clicar em “Salvar como rascunho”. Para verificar como a página será apresentada, clicar em “Visualizar”. Para disponibilizar a página, clicar no botão “Publicar”.

Para mais opções do editor de textos, clicar no ícone denominado “Mostrar/Esconder Extras (Alt + Shift + Z), conforme destacado em vermelho na figura acima.

Outubro/2015 – Página 6

5.2 - Editar página

Clicar no menu “Páginas” e no submenu “Todas as Páginas”. Com isso, aparecerá uma lista e, ao clicar no título da página ou ao passar o mouse sobre o nome dela e clicar em “Editar”, o modo de edição é acionado.

Após as alterações, clicar no botão “Atualizar” para salvá-las.

Para despublicar uma página, clicar em “Editar” no campo Status, conforme a figura abaixo, e escolher “Revisão pendente” ou “Rascunho”. Em seguida, clicar em “OK” e em “Atualizar”.

Outubro/2015 – Página 7

O atributo “Visibilidade” pode ser alterado, de acordo com objetivo. A página pode ser pública, privada (acessível somente pelos administradores do site) ou protegida por senha.

A data e a hora de publicação da página também podem ser alteradas, através do atributo “Publicado em:”, conforme mostra a figura acima.

Lembrando que, após todas as alterações feitas, deve-se clicar nos botões “OK” e “Atualizar”.

OBSERVAÇÕES IMPORTANTES:

1- É essencial que não se remova, não se renomeie e nem se mude o modelo das páginas Resultado da Busca, Links, Avisos, Contato, Mailer e demais páginas que utilizem a integração com o sistema SIGA.

2- A página Inicial pode ter “Modelo Padrão” ou modelo “Página Inicial”.

Outubro/2015 – Página 8

5.3 - A página Inicial com o modelo “Página Inicial”

O primeiro passo é alterar o modelo para “Página Inicial”.

O conteúdo é alimentado de forma diferente do restante das páginas do menu. É necessário quese crie um post e que este seja categorizado como “inicial” (categoria já criada).

Esse conteúdo aparece na parte central da tela principal do site, conforme mostra a figura a seguir.

Ao se criar um site novo, é habilitado também um plugin de banners, que aparece do lado direitodo post inicial.

Outubro/2015 – Página 9

As imagens dos banners são inseridas através do menu do gerenciador denominado “Ferramentas -> Banners (NOVO)”. Deve-se utilizar imagens em formato .jpg, com dimensões de270 x 210 pixels e tamanho máximo de 500 Kb cada.

Ainda nesse modelo de página inicial, é possível visualizar 2 avisos (posts) em destaque.

Outubro/2015 – Página 10

Para que eles recebam destaque, é necessário que se categorize o post como “avisos” (categoria já criada) e os mesmos aparecerão abaixo do post categorizado como “inicial”, na página “Inicial”, conforme mostra a figura acima.

Outubro/2015 – Página 11

5.4 - Excluir página

Para excluir uma página, clicar no menu “Todas as Páginas”. À esquerda do título, marcar quais deseja excluir, selecionar a ação em massa “Mover para a lixeira” e clicar em “Aplicar”.

Outubro/2015 – Página 12

Outra opção é passar o mouse sobre a página que deseja excluir. Aparecerão algumas opções onde uma delas é “Lixeira”.

Observação: é essencial que não se remova, não se renomeie e nem se mude o modelo das páginas Resultado da Busca, Links, Avisos, Contato, Mailer e demais páginas que utilizem a integração com o sistema SIGA.

5.5 - Ordem das páginas:

Esse atributo é responsável por controlar a ordem de aparecimento das páginas no menu e submenus, de forma crescente.

Outubro/2015 – Página 13

Cada nova página criada recebe, por padrão, a ordem “0” (zero). Se todas as páginas tiverem o mesmo número, elas serão ordenadas alfabeticamente.

A sugestão é dar um salto maior entre as páginas, para o caso de se querer inserir alguma entreelas. Por exemplo: a “Inicial” seria ordem 0 (zero). A próxima seria ordem 5, e assim por diante.

5.6 - Submenus:

Conforme mostra a figura acima, a página “Gerenciador de conteúdo”, que aparece no menu principal, possui uma subdivisão chamada “Manuais”. Portanto, o atributo “Mãe” da página “Manuais” deve ser alterado para “Gerenciador de conteúdo”.

O modelo de todas elas deve ser “Modelo Padrão”.

Observação: É essencial que não se remova, não se renomeie e nem se mude o modelo das páginas Resultado da Busca, Links, Avisos, Contato, Mailer e demais páginas que utilizem a integração com o sistema SIGA.

Outubro/2015 – Página 14

6 - Avisos

6.1 - Criar novo aviso

Para criar um novo aviso, clicar no menu “Posts”, à esquerda do gerenciador. Em seguida, clicar no submenu “Adicionar Novo”.

Inserir título e conteúdo, através do editor, conforme figura acima. Para somente salvar, clicar em “Salvar como rascunho”. Para verificar como o aviso será apresentado, clicar em “Visualizar”.Para disponibilizar o aviso, clicar no botão “Publicar”.

Para mais opções do editor de textos, clicar no ícone denominado “Mostrar/Esconder Extras (Alt + Shift + Z), conforme destacado em vermelho na figura acima.

6.2 – Editar aviso

Clicar no menu “Posts” e no submenu “Todos os Posts”. Com isso, aparecerá uma lista e, ao clicar no título do aviso ou ao passar o mouse sobre o nome dele e clicar em “Editar”, o modo deedição é acionado.

Outubro/2015 – Página 15

Após as alterações, clicar no botão “Atualizar” para salvá-las.

Para despublicar um aviso, clicar em “Editar” no campo Status, conforme a figura abaixo, e escolher “Revisão pendente” ou “Rascunho”. Em seguida, clicar em “OK” e em “Atualizar”.

O atributo “Visibilidade” pode ser alterado, de acordo com objetivo. O aviso pode ser público, privado (acessível somente pelos administradores do site) ou protegido por senha.

Outubro/2015 – Página 16

A data e a hora de publicação do aviso também podem ser alteradas, através do atributo “Publicado em:”, conforme mostra a figura abaixo.

6.3 – Excluir aviso

Para excluir um aviso, clicar no menu “Todos os Posts”. À esquerda do título, marcar quais deseja excluir, selecionar a ação em massa “Mover para a lixeira” e clicar em “Aplicar”.

Outra opção é passar o mouse sobre o aviso que deseja excluir. Aparecerão algumas opções onde uma delas é “Lixeira”.

Outubro/2015 – Página 17

7- Dicas de formatação

7.1 - Mais opções no editor de texto

Clicar no ícone “Mostrar/Esconder Extras (Alt + Shift + Z)”.

7.2 - Copiar e colar texto vindo de outros programas

Para se utilizar a formatação padrão do WordPress utilizado pela UFJF, deve-se seguir os passos abaixo para que o texto não fique desconfigurado na visualização do site.

Após clicar no ícone “Mostrar/Esconder Extras (Alt + Shift + Z)”, aparecerá uma segunda linha de opções. Clicar no ícone “Colar como texto simples”.

Outubro/2015 – Página 18

Uma nova janela será aberta, onde o texto deve ser colado. Em seguida, clicar no botão “Inserir”.

Outubro/2015 – Página 19

7.3 - Criar links no texto

Para criar um link, primeiro deve-se selecionar o texto desejado. Clicar no ícone de uma “corrente”, denominado “Inserir/editar link (Alt + Shift + A)”.

Aparecerá uma outra tela, onde deverá ser digitado o endereço (URL) do link, o Título (que é a parte do texto que foi selecionada previamente) e escolher se o link deverá “Abrir link em uma nova janela/aba”. Há também a opção de se fazer o link para algo que já existe no próprio site (páginas, notícias, imagens, etc.). Em seguida, clicar no botão “Adicionar link”.

Outubro/2015 – Página 20

7.4 - Colocar cor em links

Para se colocar cor em um link, é preciso que ele esteja selecionado. Na segunda linha de opções do editor, clique no ícone com a letra “A”, “Selecione cor do texto”. Logo após, escolha a cor desejada.

7.5 - Inserir mídias

Para inserir uma mídia (imagens ou arquivos) no conteúdo do texto de um post ou página, cliquena opção “Adicionar mídia”.

Na próxima tela, clicar em “Fazer upload dos arquivos” e, em seguida, clicar no botão “Selecionar arquivos”. Escolher as mídias a serem inseridas no texto.

Outubro/2015 – Página 21

Preencher os campos “Título” e “Legenda”. Logo após, escolher o alinhamento (Nenhum, Esquerda, Centro ou Direita) e o tamanho. Ao final, clicar no botão “Inserir no post” ou “Inserir napágina”.

Outubro/2015 – Página 22

Ao clicar numa imagem dentro do conteúdo do texto, aparecerão dois ícones, “Editar imagem” e “Excluir imagem”. O ícone “Editar imagem” possui as opções de alterar tamanho, alinhamento, título e legenda.

Outubro/2015 – Página 23

Após as modificações, clicar no botão “Atualizar”.

Uma dica:Procurar utilizar a extensão PDF ao disponibilizar os arquivos para download, pois eles não serão modificados. Usar a extensão DOC só para os casos de download de arquivos que precisarão ser preenchidos pelos usuários e retornados, como por exemplo, ficha de inscrição para algum curso ou evento.

Outubro/2015 – Página 24

8 - Links

8.1 - Criar novo link

Para criar um novo link, clicar no menu à esquerda em “Links” e no submenu “Adicionar novo”.

Preencher os campos “Nome”, “Endereço (URL)”. No campo “Destino”, marcar a opção “_blank”.Essa opção proporciona a navegação do link em nova janela ou aba.

Para finalizar, clicar no botão “Adicionar link”.

8.2 - Criar categoria de link

Dentro da visualização da página, os links podem ser organizados por categorias, o que significareuni-los em um mesmo assunto. Por exemplo, categoria chamada “Cursos de graduação”. Abaixo dela, virão os links para as páginas dos cursos, como Engenharia Elétrica, Ciências Biológicas, Medicina, e assim por diante.

Primeira Opção: Ao adicionar um link, antes de clicar no botão “Adicionar link”, conforme mostrado no item 8.1, no campo “Categorias”, clique na opção “+ Adicionar nova categoria”. Em seguida, digite o nome da categoria a ser inserida e clique no botão “Adicionar”.

Outubro/2015 – Página 25

Para finalizar, clique no botão “Adicionar link”, conforme descrito no item 8.1.

Segunda Opção: Clique no menu à esquerda no gerenciador, chamado “Links”, e no submenu “Categorias de Links”.

Em seguida, digite o nome da categoria e clique no botão “Adicionar nova categoria de links”. O campo “Descrição” é opcional.

Outubro/2015 – Página 26

8.3 - Editar link

Clicar no menu à esquerda no gerenciador, chamado “Links”, e no submenu “Todos os Links”. Clicar no nome do link a ser alterado.

Após fazer as modificações, clicar no botão “Atualizar link”.

8.4 - Excluir links

Clicar no menu à esquerda no gerenciador, chamado “Links”, e no submenu “Todos os links”. Marcar na lista aqueles que desejar excluir. Em seguida, selecionar a ação “Excluir”, na caixa “Ações em massa”, acima ou abaixo da lista. Logo após, clicar no botão “Aplicar”.

Outubro/2015 – Página 27

Outra opção: na lista de links, passar o mouse sobre aquele que desejar excluir e escolher a opção “Excluir”.

Observação: cuidado ao marcar a opção “Nome”, localizada acima ou abaixo da lista de links, e clicar em “Aplicar”, pois seleciona todos os links ao mesmo tempo, correndo-se o risco de apagá-los.

9 - Plugins

Os sites possuem recursos ativados, chamados plugins, como por exemplo, a imagem na páginaprincipal, banners, etc. Alguns estão localizados no menu à esquerda no gerenciador, chamado “Ferramentas”.

Para gerenciá-los, basta localizá-los abaixo do menu “Ferramentas” e clicar sobre o nome. O exemplo mostrado na tela acima é do plugin da “Imagem Principal (NOVO)”. Observe sempre asespecificações pedidas para a sua correta utilização.

No site da Equipe de Desenvolvimento de Sites do CGCO/UFJF, há uma lista dos recursos disponíveis para ativação. Acesse o endereço: http://www.ufjf.br/sites/gerenciador-de-conteudo

Outubro/2015 – Página 28

10 - Rodapé

É composto por um mapa com todas as páginas e o nome do site. Além disso, pode possuir informações de contato ou localização, de acordo com o interesse.

Essas informações do rodapé podem ser adicionadas através da criação de um post categorizado como "rodape" (categoria já criada). Elas aparecerão também na página “Contato”.

Outubro/2015 – Página 29

11 - Conclusão

O presente manual apresentou as funcionalidades básicas para gerenciamento dos sites. A Equipe de Desenvolvimento de Sites trabalha sob demanda, tentando sempre atender da melhormaneira possível os pedidos dos usuários. Em caso de dúvidas, deve-se entrar em contato com a Central de Atendimento do CGCO, que funciona de 8 às 12h e de 13 às 17h, nos telefones 2102-3374 e 2102-3377. Pode-se também enviar um e-mail para web.cgco@ufjf.edu.br. A equipe oferece o atendimento personalizado a cada site, nas dependências do CGCO. Visando a qualidade desse atendimento, a equipe solicita o favor de agendá-lo com antecedência, através dos contatos acima. Todas as informações necessárias estão disponíveis no endereço http://www.ufjf.br/sites. Através dele, é possível acompanhar as novidades, os novos sites disponibilizados, datas de treinamentos, downloads (manuais, tutoriais, etc.), etapas para a criação de sites, entre outras informações.

A equipe agradece a compreensão e a participação no processo dedesenvolvimento de sites institucionais da UFJF.

Outubro/2015 – Página 30

Nome Amostra Tripleto hex RGB HSV Nome Web

Água #00FFFF 0 255 255 180° 100% 100% aqua

Azul Turquesa #00CCEE 0 160 220 180° 100% 80%

Azul Turquesa Brilhante #00DDFF 40 200 240 200° 140% 120%

Azul Brasilis #00BDCE 30 150 200 200° 130% 100%

Azul Brasilis Brilhante #09ACDB 40 160 220 180° 120% 110%

Água-marinha #7FFFD4 127 255 212 160° 50% 100% aquamarine

Água-marinha média #66CDAA 102 205 170 160° 50% 80% mediumaquamarine

Azul-Celeste

Pernambucano

#00A4CD 40 130 185 135° 75% 85%

Alizarina #E32636 227 38 54 355° 83% 89% alizarin

Amarelo #FFFF00 255 255 0 60° 100% 100% yellow

Amarelo-Brasilis #ECDB00 200 160 40 100° 100% 120%

Amarelo-Creme #ECD690 160 140 100 140° 180% 140%

Amarelo claro #FFFFE0 255 255 224 60° 12% 100% lightyellow

Amarelo escuro #F2B73F 242 173 53 ?° ?% ?% darkyellow

Amarelo esverdeado #ADFF2F 173 255 47 84° 82% 100% greenyellow

Amarelo ouro claro #FAFAD2 250 250 210 60° 16% 98% lightgoldenrodyellow

Amarelo queimado #EEAD2D 238 173 45 40° 81% 93% burntyellow

Âmbar #FFBF00 255 191 0 45° 100% 100%

Ameixa #DDA0DD 221 160 221 300° 28% 87% plum

Ametista #9966CC 153 102 204 270° 50% 80% amethyst

Amêndoa #FFEBCD 255 235 205 36° 20% 100% blanchedalmond

Aspargo #7BA05B 123 160 91 92° 43% 63%

Azul #0000FF 0 0 255 240° 100% 100% blue

Azul alice #F0F8FF 240 248 255 208° 6% 100% aliceblue

Azul ardósia #6A5ACD 106 90 205 248° 56% 80% slateblue

Azul ardósia claro #8470FF 132 112 255 248° 56% 100% lightslateblue

Azul ardósia escuro #483D8B 72 61 139 248° 56% 55% darkslateblue

Azul ardósia médio #7B68EE 123 104 238 249° 56% 93% mediumslateblue

Azul areado #B8CAD4 184 202 212 201° 13% 83%

Azul aço #4682B4 70 130 180 207° 61% 71% steelblue

Azul aço claro #B0C4DE 176 196 222 214° 21% 87% lightsteelblue

Azul cadete #5F9EA0 95 158 160 182° 41% 63% cadetblue

Azul camarada #054F77 5 79 119 201° 96% 47%

Azul celeste #F0FFFF 240 255 255 180° 6% 100% azure

Azul celeste brilhante #007FFF 0 127 255 210° 100% 100%

Azul claro #ADD8E6 173 216 230 195° 25% 90% lightblue

Azul cobalto #0047AB 0 71 171 215° 100% 67%

Azul céu #87CEEB 135 206 235 197° 43% 92% skyblue

Azul céu claro #87CEFA 135 206 250 203° 46% 98% lightskyblue

Azul céu profundo #00BFFF 0 191 255 195° 100% 100% deepskyblue

Azul escuro #00008B 0 0 139 240° 100% 55% darkblue

Azul flor de milho #6495ED 100 149 237 219° 58% 93% cornflowerblue

Tabela Cores de

Nome Amostra Tripleto hex RGB HSV Nome Web

Azul força aérea #5D8AA8 93 138 168 210° 45% 45%

Azul furtivo #1E90FF 30 144 255 210° 88% 100% dodgerblue

Azul manteiga #a6aa3e 166 170 62 62° 64% 67%

Azul marinho #120A8F 18 10 143 244° 93% 56%

Azul meia-noite #191970 25 25 112 240° 78% 44% midnightblue

Azul médio #0000CD 0 0 205 240° 100% 80% mediumblue

Azul petróleo #084D6E 8 77 110 199° 93% 43%

Azul pólvora #B0E0E6 176 224 230 187° 23% 90% powderblue

Azul taparuere #248EFF 36 142 255 211° 86% 100%

Azul real #0000DD 0 0 221 240° 100% 87% royalblue

Azul violeta #8A2BE2 138 43 226 271° 81% 89% blueviolet

Açafrão #F4C430 244 196 48 45° 80% 96%

Bege #F5F5DC 245 245 220 60° 10% 96% bege

Bordô #800000 128 0 0 0° 100% 50% maroon

Borgonha #900020 144 0 32 347° 100% 56%

Branco #FFFFFF 255 255 255 0° 0% 100% white

Branco antigo #FAEBD7 250 235 215 34° 14% 98% antiquewhite

Branco fantasma #F8F8FF 248 248 255 240° 3% 100% ghostwhite

Branco floral #FFFAF0 255 250 240 40° 6% 100% floralwhite

Branco fumaça #F5F5F5 245 245 245 0° 0% 96% whitesmoke

Branco navajo #FFDEAD 255 222 173 36° 32% 100% navajowhite

Brasil #A7F432 65 96 20 84° 90% 58% brazilcor

Bronze #CD7F32 205 127 50 30° 76% 80% Bronze

Caramelo #8B5742 139 87 66 17° 53% 55%

Caqui #F0E68C 240 230 140 54° 42% 94% khaki

Cardo #D8BFD8 216 191 216 300° 12% 85% thistle

Carmesim #DC143C 220 20 60 348° 91% 86% crimson

Carmim #712F26 113 47 38 7° 66% 190% carmine

Carmim Clássico #992244 160 50 80 140° 100% 90%

Carmim carnáceo #960018 150 0 24 350° 100% 59%

Castanho avermelhado #8B0000 138 0 0 0° 240% 44%

Castanho claro #D2B48C 210 180 140 34° 33% 82% tan

Cenoura #ED9121 237 145 33 33° 86% 93%

Cereja #DE3163 222 49 99 343° 78% 87%

Cereja Hollywood #F400A1 244 0 161 320° 100% 96%

Chocolate #D2691E 210 105 30 25° 86% 82% chocolate

Ciano #00FFFF 0 255 255 180° 100% 100% aqua

Ciano claro #E0FFFF 224 255 255 180° 12% 100% lightcyan

Ciano escuro #008B8B 0 139 139 180° 100% 55% darkcyan

Cinza #808080 128 128 128 0° 0% 50% gray

Cinza ardósia #708090 112 128 144 210° 22% 56% slategray

Cinza ardósia claro #778899 119 136 153 210° 22% 60% lightslategray

Nome Amostra Tripleto hex RGB HSV Nome Web

Cinza ardósia escuro #2F4F4F 47 79 79 180° 41% 31% darkslategray

Cinza claro #D3D3D3 211 211 211 0° 0% 82% lightgray

Cinza escuro #A9A9A9 169 169 169 0° 0% 66% darkgray

Cinza fosco #696969 105 105 105 0° 0% 41% dimgray

Cinza médio #DCDCDC 220 220 220 0° 0% 86% gainsboro

Cobre #B87333 184 115 51 29° 72% 72%

Concha #FFF5EE 255 245 238 25° 7% 100% seashell

Coral #FF7F50 255 127 80 16° 69% 100% coral

Coral claro #F08080 240 128 128 0° 47% 94% lightcoral

Couro #F0DC82 240 220 130 49° 46% 94%

Creme #FFFDD0 255 253 208 57° 18% 100%

Creme de marisco #FFE4C4 255 228 196 33° 23% 100% bisque

Creme de menta #F5FFFA 245 255 250 150° 4% 100% mintcream

Caqui escuro #BDB76B 189 183 107 56° 43% 74% darkkhaki

Dainise #778899 119 136 153 210° 22% 60% lightslategray

Dourado #DAA520 218 165 32 43° 85% 85% goldenrod

Dourado escuro #B8860B 184 134 11 43° 94% 72% darkgoldenrod

Dourado pálido #EEE8AA 238 232 170 55° 29% 93% palegoldenrod

Ébano #555D50 33 36 31 8° 97% 8% ebony

Eminência #6C3082 42 19 51 284° 46% 35% eminence

Escarlate #FF2400 255 36 0 8° 100% 100% scarlet

Esmeralda #50C878 80 200 120 140° 60% 78% emerald

Eucalipto #44D7A8 27 84 66 161° 65% 55% eucalyptus

Fandango #B53389 71 20 54 320° 56% 45% fandango

Feldspato #FDD5B1 209 146 117 19° 44% 82%

Ferrugem #B7410E 183 65 14 18° 92% 72%

Flerte #A2006D 64 0 43 320° 100% 32%

Fuligem #3D2B1F 61 43 31 24° 49% 24%

Fúchsia #FF00FF 255 0 255 300° 100% 100% fuchsia

Grená #831D1C 131 29 28 1° 79% 51%

Gainsboro #DCDCDC 86 86 86 0° 0% 0%

Glitter #E6E8FA 90 91 98 234° 67% 0%

Herbal #2E8B57 46 139 87 146° 67% 55% seagreen

Heliotrópio #DF73FF 87 45 100 286° 100% 73%

Índigo #4B0082 75 0 130 275° 100% 51% indigo

Independência #4C516D 30 32 43 231° 18% 36%

Iris #5A4FCF 35 31 81 245° 57% 56%

Jade #00A86B 0 168 107 158° 100% 66%

Jambo #FF4500 255 69 0 16° 100% 100% orangered

Jasmine #F8DE7E 97 87 49 47° 90% 73%

Kiwi #8EE53F 56 90 25 91° 76% 57%

Kobi #E79FC4 91 62 77 329° 60% 76%

Kobicha #6B4423 42 27 14 28° 51% 28%

Laranja #FFA500 255 165 0 39° 100% 100% orange

Laranja escuro #FF8C00 255 140 0 33° 100% 100% darkorange

Nome Amostra Tripleto hex RGB HSV Nome Web

Laranja claro #FFB84D 255 184 77 36° 70% 65% lightorange

Lavanda #E6E6FA 230 230 250 240° 8% 98% lavender

Lavanda avermelhada #FFF0F5 255 240 245 340° 6% 100% lavenderblush

Lilás #C8A2C8 200 162 200 300° 19% 78% lilac

Limão (cor) #00FF00 0 255 0 120° 100% 100% limon

Lima #FDE910 253 233 16 55° 94% 99% lime

Linho #FAF0E6 250 240 230 30° 8% 98% linen

Madeira #DEB887 222 184 135 34° 39% 87% burlywood

Magenta #FF00FF 255 0 255 300° 100% 100% fuchsia

Magenta escuro #8B008B 139 0 139 300° 100% 55% darkmagenta

Malva #E0B0FF 224 176 255 276° 31% 100%

Mamão batido #FFEFD5 255 239 213 37° 16% 100% papayawhip

Maná #F0FFF0 240 255 240 120° 6% 100% honeydew

Marfim #FFFFF0 255 255 240 60° 6% 100% ivory

Marrom #964b00 150 75 0 30° 100% 59%

Marrom amarelado #F4A460 244 164 96 28° 61% 96% sandybrown

Marrom claro #A52A2A 165 42 42 0° 75% 65% brown

Marrom rosado #BC8F8F 188 143 143 0° 24% 74% rosybrown

Marrom sela #8B4513 139 69 19 25° 86% 55% saddlebrown

Milho #FBEC5D 251 236 93 54° 63% 98% maize

Milho Claro #FFF8DC 255 248 220 48° 14% 100% cornsilk

Mocassim #FFE4B5 255 228 181 38° 29% 100% moccasin

Mostarda #FFDB58 255 219 88 47° 65% 100%

Naval #000080 0 0 128 240° 100% 50% navy

Neve #FFFAFA 255 250 250 0° 2% 100% snow

Nyanza #E9FFDB 91 100 86 97° 100% 93%

Ocre #CC7722 204 119 34 30° 83% 80%

Oliva #808000 128 128 0 60° 100% 50% olive

Oliva escura #556B2F 85 107 47 82° 56% 42% darkolivegreen

Oliva parda #6B8E23 107 142 35 80° 75% 56% olivedrab

Orquídea #DA70D6 218 112 214 302° 49% 85% orchid

Orquídea escura #9932CC 153 50 204 280° 75% 80% darkorchid

Orquídea média #BA55D3 186 85 211 288° 60% 83% mediumorchid

Ouro #FFD700 255 215 0 51° 100% 100% gold

Pardo #CD853F 205 133 63 30° 69% 80% peru

Pardo escuro #CC6600 204 102 0 30° 100% 80%

Prata #C0C0C0 192 192 192 0° 0% 75% silver

Preto #000000 0 0 0 0° 0% 0% black

Pêssego #FFDAB9 255 218 185 28° 27% 100% peachpuff

Púrpura #800080 128 0 128 300° 100% 50% purple

Púrpura média #9370DB 147 112 219 260° 49% 86% mediumpurple

Quantum #111111 17 17 17 0° 0% 6%

Nome Amostra Tripleto hex RGB HSV Nome Web

Quartz #51484F 32 28 31 313° 6% 30%

Renda antiga #FDF5E6 253 245 230 39° 9% 99% oldlace

Rosa #FFCBDB 255 203 219 342° 20% 100% pink

Rosa brilhante #FF007F 255 0 127 330° 100% 100%

Rosa Choque #FC0FC0 252 15 192 315° 94% 99%

Rosa amoroso #CD69CD 240 130 210 300° 97% 120% lovedpink

Rosa claro #FFB6C1 255 182 193 351° 29% 100% lightpink

Rosa Danação #DA69A1 218 105 161 330° 52% 85%

Rosa embaçado #FFE4E1 255 228 225 6° 12% 100% mistyrose

Rosa forte #FF69B4 255 105 180 330° 59% 100% hotpink

Rosa profundo #FF1493 255 20 147 328° 92% 100% deeppink

Roxo #993399 153 51 153 300° 67% 60% purple

Roxo– Brasilis #8A008A 200 25 180 330° 75% 200% brasilianpurple

Rútilo #6D351A 109 53 26 20° 76% 43%

Salmão #FA7F72 250 127 114 6° 54% 98%

Salmão claro #FFA07A 255 160 122 17° 52% 100% lightsalmon

Salmão escuro #E9967A 233 150 122 15° 48% 91% darksalmon

Siena #FF8247 255 130 71 19° 72% 100%

Sépia #705714 112 87 20 44° 82% 44%

Tangerina #F28500 95 52 0 33° 100% 50%

Terracota #E2725B 226 114 91 10° 60% 89%

Tijolo refratário #B22222 178 34 34 0° 81% 70% firebrick

Tomate #FF6347 255 99 71 9° 72% 100% tomato

Trigo #F5DEB3 245 222 179 39° 27% 96% wheat

Triássico #FF2401 255 36 1 8° 100% 100%

Turquesa #40E0D0 64 224 208 174° 71% 88% turquoise

Turquesa escura #00CED1 0 206 209 181° 100% 82% darkturquoise

Turquesa média #48D1CC 72 209 204 178° 66% 82% mediumturquoise

Turquesa pálida #AFEEEE 175 238 238 180° 26% 93% paleturquoise

Tangerina #F28500 95 52 0 33° 100% 50%

Terracota #E2725B 226 114 91 10° 60% 89%

Tijolo refratário #B22222 178 34 34 0° 81% 70% firebrick

Tomate #FF6347 255 99 71 9° 72% 100% tomato

Trigo #F5DEB3 245 222 179 39° 27% 96% wheat

Triássico #FF2401 255 36 1 8° 100% 100%

Turquesa #40E0D0 64 224 208 174° 71% 88% turquoise

Turquesa escura #00CED1 0 206 209 181° 100% 82% darkturquoise

Turquesa média #48D1CC 72 209 204 178° 66% 82% mediumturquoise

Turquesa pálida #AFEEEE 175 238 238 180° 26% 93% paleturquoise

Verde #008000 0 128 0 120° 100% 50% green

Verde espectro #00FF00 0 255 0 120° 100% 100% lime

Verde amarelado #9ACD32 154 205 50 80° 76% 80% yellowgreen

Verde claro #90EE90 144 238 144 120° 39% 93% lightgreen

Verde escuro #006400 0 100 0 120° 100% 39% darkgreen

Nome Amostra Tripleto hex RGB HSV Nome Web

Verde floresta #228B22 34 139 34 120° 76% 55% forestgreen

Verde fluorescente #CCFF33 204 255 51 75° 80% 100%

Verde lima #32CD32 50 205 50 120° 76% 80% limegreen

Verde grama #7CFC00 124 252 0 90° 100% 99% lawngreen

Verde mar claro #20B2AA 32 178 170 177° 82% 70% lightseagreen

Verde mar escuro #8FBC8F 143 188 143 120° 24% 74% darkseagreen

Verde mar médio #3CB371 60 179 113 147° 66% 70% mediumseagreen

Verde militar #78866B 120 134 107 91° 20% 53%

Verde Paris #7FFF00 127 255 0 90° 100% 100% chartreuse

Verde primavera #00FF7F 0 255 127 150° 100% 100% springgreen

Verde primavera médio #00FA9A 0 250 154 157° 100% 98% mediumspringgreen

Verde pálido #98FB98 152 251 152 120° 39% 98% palegreen

Verde-azulado #008080 0 128 128 180° 100% 50% teal

Vermelho #FF0000 255 0 0 0° 100% 100% red

Vermelho enegrecido #550000 85 0 0 0° 100% 34%

Vermelho escuro #8B0000 139 0 0 0° 100% 55% darkred

Vermelho indiano #CD5C5C 205 92 92 0° 55% 80% indianred

Vermelho violeta #D02090 208 32 144 322° 85% 82%

Vermelho violeta médio #C71585 199 21 133 322° 89% 78% mediumvioletred

Vermelho violeta pálido #DB7093 219 112 147 340° 49% 86% palevioletred

Violeta #EE82EE 238 130 238 300° 45% 93% violet

Violeta escuro #9400D3 148 0 211 282° 100% 83% darkviolet

Violeta claro #F8CBF8 248 203 248 200° 183% 212% lightviolet

Wageningen Verde #34B233 20 70 20 120° 56% 45%

Wenge #645452 39 33 32 7° 10% 36%

Wisteria #C9A0DC 79 63 86 281° 46% 75%

Xanadu #738678 115 134 120 136° 14% 52%

Yale Blue #0F4D92 15 77 146 212° 90% 57%

Yellow #FFFF00 255 255 0 60° 100% 100%

Yellow (process) #FFEF00 255 239 0 56° 100% 100%

Yellow (RYB) #FEFE33 254 254 51 60° 99% 60%

Yellow-green #9ACD32 154 205 50 60° 60% 54%

Zaffre #0014A8 0 8 66 233° 100% 33%

Zomp #39A78E 22 65 56 166° 49% 44%

Zinco #E2DDF0 226 221 240 257° 8% 94%