{"id":308,"date":"2018-01-14T17:17:18","date_gmt":"2018-01-14T19:17:18","guid":{"rendered":"http:\/\/eliezerladeira.com.br\/blog\/?p=308"},"modified":"2018-08-30T22:16:30","modified_gmt":"2018-08-31T01:16:30","slug":"cores-em-html","status":"publish","type":"post","link":"https:\/\/eliezerladeira.com.br\/blog\/cores-em-html\/","title":{"rendered":"Cores em HTML"},"content":{"rendered":"

[ratings]<\/p>\n

O sistema\u00a0hexadecimal \u00e9 um sistema de numera\u00e7\u00e3o posicional que representa os n\u00fameros em base 16, portanto empregando 16 s\u00edmbolos.<\/p>\n

Quando queremos usar cores em um documento HTML precisamos usar esses valores hexadecimais, porque o HTML s\u00f3 suporta esse formato para cores, exceto algumas cores que al\u00e9m do hexadecimal, tamb\u00e9m aceita o nome dela em ingl\u00eas, como ir\u00e1 mostrar na tabela mais abaixo.<\/p>\n

Nota<\/strong>: As cores marcadas por um asterisco podem ser escritas no lugar dos c\u00f3digos.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Nome da cor<\/strong><\/td>\nC\u00f3digo da cor<\/strong><\/td>\nApar\u00eancia<\/strong><\/td>\n<\/tr>\n
* <\/span>White<\/td>\n#FFFFFF<\/td>\n<\/td>\n<\/tr>\n
*<\/span> Red<\/td>\n#FF0000<\/td>\n<\/td>\n<\/tr>\n
*<\/span> Green<\/td>\n#00FF00<\/td>\n<\/td>\n<\/tr>\n
*<\/span> Blue<\/td>\n#0000FF<\/td>\n<\/td>\n<\/tr>\n
Magenta<\/td>\n#FF00FF<\/td>\n<\/td>\n<\/tr>\n
Cyan<\/td>\n#00FFFF<\/td>\n<\/td>\n<\/tr>\n
*<\/span> Yellow<\/td>\n#FFFF00<\/td>\n<\/td>\n<\/tr>\n
* <\/span>Black<\/td>\n#000000<\/td>\n<\/td>\n<\/tr>\n
*<\/span> Aqua<\/td>\n#70DB93<\/td>\n<\/td>\n<\/tr>\n
Baker”s Chocolate<\/td>\n#5C3317<\/td>\n<\/td>\n<\/tr>\n
Blue Violet<\/td>\n#9F5F9F<\/td>\n<\/td>\n<\/tr>\n
Brass<\/td>\n#B5A642<\/td>\n<\/td>\n<\/tr>\n
Bright Gold<\/td>\n#D9D919<\/td>\n<\/td>\n<\/tr>\n
Brown<\/td>\n#A62A2A<\/td>\n<\/td>\n<\/tr>\n
Bronze<\/td>\n#8C7853<\/td>\n<\/td>\n<\/tr>\n
Bronze II<\/td>\n#A67D3D<\/td>\n<\/td>\n<\/tr>\n
Cadet Blue<\/td>\n#5F9F9F<\/td>\n<\/td>\n<\/tr>\n
Cool Copper<\/td>\n#D98719<\/td>\n<\/td>\n<\/tr>\n
Copper<\/td>\n#B87333<\/td>\n<\/td>\n<\/tr>\n
Coral<\/td>\n#FF7F00<\/td>\n<\/td>\n<\/tr>\n
Corn Flower Blue<\/td>\n#42426F<\/td>\n<\/td>\n<\/tr>\n
Dark Brown<\/td>\n#5C4033<\/td>\n<\/td>\n<\/tr>\n
Dark Green<\/td>\n#2F4F2F<\/td>\n<\/td>\n<\/tr>\n
Dark Green Copper<\/td>\n#4A766E<\/td>\n<\/td>\n<\/tr>\n
Dark Olive Green<\/td>\n#4F4F2F<\/td>\n<\/td>\n<\/tr>\n
Dark Orchid<\/td>\n#9932CD<\/td>\n<\/td>\n<\/tr>\n
Dark Purple<\/td>\n#871F78<\/td>\n<\/td>\n<\/tr>\n
Dark Slate Blue<\/td>\n#6B238E<\/td>\n<\/td>\n<\/tr>\n
Dark Slate Grey<\/td>\n#2F4F4F<\/td>\n<\/td>\n<\/tr>\n
Dark Tan<\/td>\n#97694F<\/td>\n<\/td>\n<\/tr>\n
Dark Turquoise<\/td>\n#7093DB<\/td>\n<\/td>\n<\/tr>\n
Dark Wood<\/td>\n#855E42<\/td>\n<\/td>\n<\/tr>\n
Dim Grey<\/td>\n#545454<\/td>\n<\/td>\n<\/tr>\n
Dusty Rose<\/td>\n#856363<\/td>\n<\/td>\n<\/tr>\n
Feldspar<\/td>\n#D19275<\/td>\n<\/td>\n<\/tr>\n
Firebrick<\/td>\n#8E2323<\/td>\n<\/td>\n<\/tr>\n
Forest Green<\/td>\n#238E23<\/td>\n<\/td>\n<\/tr>\n
Gold<\/td>\n#CD7F32<\/td>\n<\/td>\n<\/tr>\n
Goldenrod<\/td>\n#DBDB70<\/td>\n<\/td>\n<\/tr>\n
*Gray<\/td>\n#C0C0C0<\/td>\n<\/td>\n<\/tr>\n
Green Copper<\/td>\n#527F76<\/td>\n<\/td>\n<\/tr>\n
Green Yellow<\/td>\n#93DB70<\/td>\n<\/td>\n<\/tr>\n
Hunter Green<\/td>\n#215E21<\/td>\n<\/td>\n<\/tr>\n
Indian Red<\/td>\n#4E2F2F<\/td>\n<\/td>\n<\/tr>\n
Khaki<\/td>\n#9F9F5F<\/td>\n<\/td>\n<\/tr>\n
Light Blue<\/td>\n#C0D9D9<\/td>\n<\/td>\n<\/tr>\n
Light Grey<\/td>\n#A8A8A8<\/td>\n<\/td>\n<\/tr>\n
Light Steel Blue<\/td>\n#8F8FBD<\/td>\n<\/td>\n<\/tr>\n
Light Wood<\/td>\n#E9C2A6<\/td>\n<\/td>\n<\/tr>\n
*Lime<\/td>\n#32CD32<\/td>\n<\/td>\n<\/tr>\n
Mandarian Orange<\/td>\n#E47833<\/td>\n<\/td>\n<\/tr>\n
*Maroon<\/td>\n#8E236B<\/td>\n<\/td>\n<\/tr>\n
Medium Aquamarine<\/td>\n#32CD99<\/td>\n<\/td>\n<\/tr>\n
Medium Blue<\/td>\n#3232CD<\/td>\n<\/td>\n<\/tr>\n
Medium Forest Green<\/td>\n#6B8E23<\/td>\n<\/td>\n<\/tr>\n
Medium Goldenrod<\/td>\n#EAEAAE<\/td>\n<\/td>\n<\/tr>\n
Medium Orchid<\/td>\n#9370DB<\/td>\n<\/td>\n<\/tr>\n
Medium Sea Green<\/td>\n#426F42<\/td>\n<\/td>\n<\/tr>\n
Medium Slate Blue<\/td>\n#7F00FF<\/td>\n<\/td>\n<\/tr>\n
Medium Spring Green<\/td>\n#7FFF00<\/td>\n<\/td>\n<\/tr>\n
Medium Turquoise<\/td>\n#70DBDB<\/td>\n<\/td>\n<\/tr>\n
Medium Violet Red<\/td>\n#DB7093<\/td>\n<\/td>\n<\/tr>\n
Medium Wood<\/td>\n#A68064<\/td>\n<\/td>\n<\/tr>\n
Midnight Blue<\/td>\n#2F2F4F<\/td>\n<\/td>\n<\/tr>\n
*<\/span> Navy<\/td>\n#23238E<\/td>\n<\/td>\n<\/tr>\n
Neon Blue<\/td>\n#4D4DFF<\/td>\n<\/td>\n<\/tr>\n
Neon Pink<\/td>\n#FF6EC7<\/td>\n<\/td>\n<\/tr>\n
New Midnight Blue<\/td>\n#00009C<\/td>\n<\/td>\n<\/tr>\n
New Tan<\/td>\n#EBC79E<\/td>\n<\/td>\n<\/tr>\n
Old Gold<\/td>\n#CFB53B<\/td>\n<\/td>\n<\/tr>\n
Orange<\/td>\n#FF7F00<\/td>\n<\/td>\n<\/tr>\n
Orange Red<\/td>\n#FF2400<\/td>\n<\/td>\n<\/tr>\n
Orchid<\/td>\n#DB70DB<\/td>\n<\/td>\n<\/tr>\n
Pale Green<\/td>\n#8FBC8F<\/td>\n<\/td>\n<\/tr>\n
Pink<\/td>\n#BC8F8F<\/td>\n<\/td>\n<\/tr>\n
Plum<\/td>\n#EAADEA<\/td>\n<\/td>\n<\/tr>\n
Quartz<\/td>\n#D9D9F3<\/td>\n<\/td>\n<\/tr>\n
Rich Blue<\/td>\n#5959AB<\/td>\n<\/td>\n<\/tr>\n
Salmon<\/td>\n#6F4242<\/td>\n<\/td>\n<\/tr>\n
Scarlet<\/td>\n#8C1717<\/td>\n<\/td>\n<\/tr>\n
Sea Green<\/td>\n#238E68<\/td>\n<\/td>\n<\/tr>\n
Semi-Sweet Chocolate<\/td>\n#6B4226<\/td>\n<\/td>\n<\/tr>\n
Sienna<\/td>\n#8E6B23<\/td>\n<\/td>\n<\/tr>\n
* <\/span>Silver<\/td>\n#E6E8FA<\/td>\n<\/td>\n<\/tr>\n
Sky Blue<\/td>\n#3299CC<\/td>\n<\/td>\n<\/tr>\n
Slate Blue<\/td>\n#007FFF<\/td>\n<\/td>\n<\/tr>\n
Spicy Pink<\/td>\n#FF1CAE<\/td>\n<\/td>\n<\/tr>\n
Spring Green<\/td>\n#00FF7F<\/td>\n<\/td>\n<\/tr>\n
Steel Blue<\/td>\n#236B8E<\/td>\n<\/td>\n<\/tr>\n
Summer Sky<\/td>\n#38B0DE<\/td>\n<\/td>\n<\/tr>\n
Tan<\/td>\n#DB9370<\/td>\n<\/td>\n<\/tr>\n
Thistle<\/td>\n#D8BFD8<\/td>\n<\/td>\n<\/tr>\n
Turquoise<\/td>\n#ADEAEA<\/td>\n<\/td>\n<\/tr>\n
Very Dark Brown<\/td>\n#5C4033<\/td>\n<\/td>\n<\/tr>\n
Very Light Grey<\/td>\n#CDCDCD<\/td>\n<\/td>\n<\/tr>\n
Violet<\/td>\n#4F2F4F<\/td>\n<\/td>\n<\/tr>\n
Violet Red<\/td>\n#CC3299<\/td>\n<\/td>\n<\/tr>\n
Wheat<\/td>\n#D8D8BF<\/td>\n<\/td>\n<\/tr>\n
Yellow Green<\/td>\n#99CC32<\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Esses s\u00e3o alguns dos c\u00f3digos mais utilizados na cria\u00e7\u00e3o de websites e pe\u00e7as gr\u00e1ficas pelo Photoshop, Illustrator, Corel, entre outros.<\/p>\n","protected":false},"excerpt":{"rendered":"

[ratings] O sistema\u00a0hexadecimal \u00e9 um sistema de numera\u00e7\u00e3o posicional que representa os n\u00fameros em base 16, portanto empregando 16 s\u00edmbolos.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_layout":"default_layout","_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"ngg_post_thumbnail":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[15],"tags":[79,51],"class_list":["post-308","post","type-post","status-publish","format-standard","hentry","category-informatica","tag-html","tag-programacao"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":304,"url":"https:\/\/eliezerladeira.com.br\/blog\/guia-pratico-de-html\/","url_meta":{"origin":308,"position":0},"title":"Guia Pr\u00e1tico de HTML","author":"admin","date":"","format":false,"excerpt":"[ratings] SOBRE O HTML O HTML \u00e9 uma linguagem de marca\u00e7\u00e3o de texto. Mais especificamente, uma linguagem de marca\u00e7\u00e3o de hipertexto. Portanto, antes de come\u00e7ar a falar de HTML, vamos entender o que vem a ser uma linguagem de marca\u00e7\u00e3o. Linguagens de marca\u00e7\u00e3o (markup languages, em ingl\u00eas) s\u00e3o linguagens que\u2026","rel":"","context":"Em "Inform\u00e1tica"","block_context":{"text":"Inform\u00e1tica","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/informatica\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5014,"url":"https:\/\/eliezerladeira.com.br\/blog\/%f0%9f%8f%b7%ef%b8%8f-tags-basicas-no-html-guia-completo-para-iniciantes\/","url_meta":{"origin":308,"position":1},"title":"\ud83c\udff7\ufe0f Tags B\u00e1sicas no HTML: Guia Completo para Iniciantes","author":"admin","date":"","format":false,"excerpt":"Aprenda como funcionam as principais tags HTML e comece hoje mesmo a montar suas pr\u00f3prias p\u00e1ginas da web. Simples, direto e com exemplos pr\u00e1ticos!","rel":"","context":"Em "Desenvolvimento de Software"","block_context":{"text":"Desenvolvimento de Software","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/tecnologia\/desenvolvimento-de-software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/04\/ChatGPT-Image-Apr-9-2025-09_08_34-AM.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/04\/ChatGPT-Image-Apr-9-2025-09_08_34-AM.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/04\/ChatGPT-Image-Apr-9-2025-09_08_34-AM.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/04\/ChatGPT-Image-Apr-9-2025-09_08_34-AM.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":339,"url":"https:\/\/eliezerladeira.com.br\/blog\/variaveis-variaveis\/","url_meta":{"origin":308,"position":2},"title":"Vari\u00e1veis Vari\u00e1veis","author":"admin","date":"","format":false,"excerpt":"[ratings] Neste post mostrarei uma r\u00e1pida maneira de como criar sisteminhas que geram automa\u00a0automaticamente combos de HTML e como us\u00e1-los de maneira produtiva para uma exclus\u00e3o, por exemplo. Para se fazer isso, usa-se o conceito de uma vari\u00e1vel que n\u00e3o somente cont\u00e9m um valor que h\u00e1 distin\u00e7\u00e3o, que \u00e9 o\u2026","rel":"","context":"Em "Inform\u00e1tica"","block_context":{"text":"Inform\u00e1tica","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/informatica\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4778,"url":"https:\/\/eliezerladeira.com.br\/blog\/aplicativos-gratuitos-que-ajudam-na-produtividade\/","url_meta":{"origin":308,"position":3},"title":"Aplicativos gratuitos que ajudam na produtividade","author":"admin","date":"","format":false,"excerpt":"\u00a0 Quase\u00a0todo mundo que j\u00e1 teve alguma experi\u00eancia com software livre conhece o conjunto de aplicativos de escrit\u00f3rio\u00a0OpenOffice.org: \u00e9 um pacote gratuito com processador de textos, planilha de c\u00e1lculo, editor de apresenta\u00e7\u00f5es, banco de dados e ferramenta de desenho que tem boa parte dos recursos encontrados em seu concorrente comercial\u2026","rel":"","context":"Em "Software"","block_context":{"text":"Software","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/tecnologia\/software\/"},"img":{"alt_text":"Abiword","src":"https:\/\/i0.wp.com\/www.eliezerladeira.com.br\/site_old\/wp-content\/uploads\/2016\/08\/abiword.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":310,"url":"https:\/\/eliezerladeira.com.br\/blog\/html-basico\/","url_meta":{"origin":308,"position":4},"title":"HTML B\u00e1sico","author":"admin","date":"","format":false,"excerpt":"[ratings] HTML\u00a0\u00e9 uma abrevia\u00e7\u00e3o de HyperText Markup Language, que em portugu\u00eas significa Linguagem de Marca\u00e7\u00e3o de Hipertexto. Os arquivos HTML s\u00e3o interpretados pelos navegadores (browsers). Portanto, caso voc\u00ea tenha algum arquivo HTML no computador, basta pedir que o seu navegador o abra. O HTML trabalha com o sistema de tags\u2026","rel":"","context":"Em "Inform\u00e1tica"","block_context":{"text":"Inform\u00e1tica","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/informatica\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2783,"url":"https:\/\/eliezerladeira.com.br\/blog\/como-criar-um-widget\/","url_meta":{"origin":308,"position":5},"title":"Como criar um\u00a0widget","author":"admin","date":"","format":false,"excerpt":"Produza seu pr\u00f3prio widget\u00a0e exporte seu feed RSS para outros sites e blogs. Os widgets\u00a0est\u00e3o no auge de sua popularidade. Com eles \u00e9 poss\u00edvel adicionar not\u00edcias, miniaplicativos, joguinhos e outros trecos digitais a qualquer blog ou site pessoal. Parece complicado de fazer, mas, em termos de programa\u00e7\u00e3o, um widget \u00e9\u2026","rel":"","context":"Em "Programa\u00e7\u00e3o"","block_context":{"text":"Programa\u00e7\u00e3o","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/tecnologia\/programacao\/"},"img":{"alt_text":"266_widget2","src":"https:\/\/i0.wp.com\/netsysoft.wordpress.com\/wp-content\/uploads\/2009\/01\/266_widget2.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/posts\/308","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/comments?post=308"}],"version-history":[{"count":1,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/posts\/308\/revisions"}],"predecessor-version":[{"id":309,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/posts\/308\/revisions\/309"}],"wp:attachment":[{"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/media?parent=308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/categories?post=308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/tags?post=308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}