# Tons de joia: códigos de esmeralda, safira, rubi e ametista [Canonical HTML page](https://gradiently.design/pt-pt/guide/jewel-tone-colors) Esmeralda, safira, rubi e ametista parecem caros porque são profundos e saturados ao mesmo tempo. Aqui ficam os códigos, as combinações que os mantêm ricos e os erros que os fazem parecer um disfarce. ## The short version - Os tons de joia são cores profundas e muito saturadas com nomes de gemas: verde esmeralda, azul safira, vermelho rubi, roxo ametista, além de topázio, citrino, granada e turmalina. - O que faz de uma cor um tom de joia é a combinação de saturação forte com um valor médio a escuro, para parecer iluminada por dentro e não viva nem pálida. - Os tons de joia ficam mais ricos ao lado de um neutro quente como o marfim, de um quase preto ou de um pouco de dourado suave. - Esmeralda, safira, rubi e ametista passam todos o contraste WCAG AA para texto corrente sobre branco ou marfim com os códigos deste artigo. - Usa um tom de joia como cor principal e, no máximo, outro como acento, porque um conjunto completo de gemas com igual força parece um disfarce. Os **tons de joia** são cores profundas e saturadas com nomes de pedras preciosas: esmeralda `#00674F`, safira `#0F52BA`, rubi `#9B111E` e ametista `#6A3D9A` são as quatro que todos reconhecem, com topázio, citrino, granada e turmalina logo atrás. Ocupam uma faixa estreita: muito mais ricos do que os pastéis, mais escuros do que o néon e nunca esbatidos como os tons de terra. Essa combinação é o que os faz parecer valiosos e os torna adequados a eventos noturnos, campanhas de inverno, rótulos de vinho e qualquer marca que queira transmitir substância sem recorrer ao preto. ## Códigos hex dos tons de joia Estes são códigos de trabalho, afinados para se parecerem com a pedra no ecrã e para aguentarem como texto. As gemas variam, por isso não existe uma esmeralda oficial, mas estes valores estão bem dentro do que as pessoas imaginam. - Esmeralda: #00674f - Safira: #0f52ba - Rubi: #9b111e - Ametista: #6a3d9a - Topázio: #d98e04 - Citrino: #e1b000 - Granada: #6f1d2b - Turmalina: #b0185a - Turmalina azul-esverdeada: #0e7c7b Nove tons de joia. Os quatro primeiros são o conjunto clássico; o topázio e o citrino são os membros quentes e claros da família. | Tom de joia | Hex | RGB | Texto sobre branco | | --- | --- | --- | --- | | Esmeralda | `#00674F` | 0, 103, 79 | 6,88:1, passa AA | | Safira | `#0F52BA` | 15, 82, 186 | 7,15:1, passa AAA | | Rubi | `#9B111E` | 155, 17, 30 | 8,42:1, passa AAA | | Ametista | `#6A3D9A` | 106, 61, 154 | 7,64:1, passa AAA | | Turmalina azul-esverdeada | `#0E7C7B` | 14, 124, 123 | 5,01:1, passa AA | | Turmalina | `#B0185A` | 176, 24, 90 | 6,72:1, passa AA | | Topázio | `#D98E04` | 217, 142, 4 | usa texto escuro | | Citrino | `#E1B000` | 225, 176, 0 | usa texto escuro | O contraste é medido contra branco puro. O topázio e o citrino são demasiado claros para texto sobre branco, mas suportam bem texto quase preto: o citrino com `#14141A` chega a 9,10:1. Se precisares destas cores noutro formato, os [códigos de cor hex](https://gradiently.design/pt-pt/guide/color-codes-explained) explicam como se relacionam hex, RGB e HSL, e [hex para RGB](https://gradiently.design/pt-pt/guide/hex-to-rgb) mostra a conversão à mão. ## O que faz de uma cor um tom de joia Duas definições, ao mesmo tempo. A saturação é alta: a cor é pura, quase sem cinzento. O valor é médio a escuro: fica bem abaixo do branco. Sobe o valor e a esmeralda transforma-se em menta; baixa a saturação e transforma-se em salva. Mantém os dois e ficas com o brilho da luz a atravessar uma pedra lapidada. ### Não é um tom de joia - Menta `#98E5C8`: demasiado clara, um pastel - Salva `#8A9A84`: esbatida, um tom suave - Lima `#7CFF3A`: viva e elétrica, um néon - Floresta `#1F3B2C`: tão escura que parece quase preta ### Tom de joia - Esmeralda `#00674F`: verde puro em valor médio escuro - Safira `#0F52BA`: azul saturado, claramente iluminado - Rubi `#9B111E`: vermelho profundo que ainda brilha - Ametista `#6A3D9A`: roxo com profundidade, não cinzento É a mesma ideia que descrevem as [tonalidades, tons e sombras](https://gradiently.design/pt-pt/guide/tints-tones-shades): os tons de joia são sobretudo matizes puros com um pouco de preto, raramente com branco ou cinzento. Estão também no extremo oposto dos [tons de terra](https://gradiently.design/pt-pt/guide/earth-tone-colors), que são os mesmos matizes puxados para o castanho. ## Paletas de cores de tons de joia que podes usar Um tom de joia precisa de algo calmo à volta. Sozinha, uma página de esmeralda é pesada; ao lado do marfim, parece intencional. Estas quatro paletas lideram cada uma com uma pedra e juntam apoio na proporção certa. - **Biblioteca esmeralda:** esmeralda `#00674F`, marfim `#F6EFE2`, dourado suave `#C9A24A`, tinta `#14141A`. Clássica, livresca, boa para editoras e bares. - **Noite safira:** safira `#0F52BA`, meia-noite `#0B1430`, pérola `#EEF0F5`, citrino `#E1B000` como pequeno acento. Calma e confiante. - **Ceia rubi:** rubi `#9B111E`, granada `#6F1D2B`, creme `#F4EADB`, oliva `#5E6B3A`. Quente, generosa, feita para comida e vinho. - **Estúdio ametista:** ametista `#6A3D9A`, ameixa `#3B1F4F`, linho `#F2ECE4`, turmalina azul-esverdeada `#0E7C7B`. Criativa e um pouco inesperada. Usa a [regra 60 30 10](https://gradiently.design/pt-pt/guide/60-30-10-rule) como divisão inicial: o neutro cobre a maior parte da superfície, o tom de joia fica com as formas grandes e o acento com uma nesga. O dourado funciona melhor suave; um dourado amarelo vivo ao lado da esmeralda depressa parece um disfarce. ## Gradientes de tons de joia Os tons de joia fazem alguns dos gradientes mais ricos que existem, porque cada um pode esbater-se na sua própria sombra sem ficar turvo. Mantém os vizinhos próximos na roda de cores e deixa um fundo escuro fazer a maior parte do trabalho. - Profundidade esmeralda: `radial-gradient(circle at 30% 25%, #10a37f 0%, #00674f 40%, #052a22 85%)` - Ascensão safira: `linear-gradient(150deg, #0b1430 0%, #0f52ba 60%, #4f86e6 100%)` - Brilho rubi: `radial-gradient(circle at 70% 30%, #d4243a 0%, #9b111e 40%, #3a0710 90%)` - De ametista a turmalina: `linear-gradient(160deg, #1e0f33 0%, #6a3d9a 55%, #b0185a 100%)` - De esmeralda a safira: `linear-gradient(135deg, #00674f 0%, #0e7c7b 50%, #0f52ba 100%)` - Citrino sobre granada: `radial-gradient(circle at 50% 20%, #e1b000 0%, #d98e04 30%, #6f1d2b 95%)` Seis gradientes de tons de joia. Cada um fica entre matizes vizinhos, para o meio da mistura se manter limpo. Evita misturar o rubi diretamente com a esmeralda. São complementares, por isso o ponto médio fica castanho; os [gradientes turvos](https://gradiently.design/pt-pt/guide/muddy-gradients) explicam porquê e como contornar o problema com uma terceira cor ou um fundo escuro. ## Onde os tons de joia funcionam melhor Os tons de joia têm peso, por isso servem momentos que devem parecer ponderados: um convite, uma ementa sazonal, a capa de um relatório anual, o lançamento de algo que custa dinheiro a sério. Compõe o texto em marfim ou num tom claro do mesmo matiz e mantém a disposição sóbria. Um convite vertical para um jantar de inverno com letras claras sobre um fundo profundo e rico Um convite 5×7 pol. a 1500×2100. Um fundo profundo com letra clara é o gesto clássico dos tons de joia. Uma publicação vertical de rede social a anunciar um produto de edição limitada rubi sobre um fundo de cor profunda Uma publicação de Instagram a 1080×1350 para um produto limitado, deixando uma só pedra definir o ambiente. Muitas marcas recorrem aos tons de joia no outono e no inverno, e é exatamente por isso que uma campanha sazonal se pode confundir com as dos outros. Se queres a riqueza sem a semelhança, um Mark do Gradiently dá-te um fundo em tons de joia que só tu podes exportar depois de o reservares, e mantém o teu texto legível onde quer que esteja. ## Erros comuns com tons de joia - **Usar quatro pedras com força total.** Esmeralda, safira, rubi e ametista juntas parecem uma caixa de rebuçados. Escolhe uma principal. - **Combinar com branco puro.** Dá contraste, mas fica clínico. Um marfim quente faz a cor parecer mais profunda. - **Pôr tons de joia claros por baixo de texto branco.** O citrino e o topázio pedem texto escuro; branco sobre citrino falha muito no contraste. - **Imprimir sem prova.** Os azuis e roxos saturados saem muitas vezes da gama CMYK e ficam baços no papel. Lê [RGB vs CMYK](https://gradiently.design/pt-pt/guide/rgb-vs-cmyk) antes de enviares um ficheiro. ## FAQ ### O que são tons de joia? Os tons de joia são cores profundas e saturadas com nomes de gemas, como verde esmeralda, azul safira, vermelho rubi e roxo ametista. Combinam saturação forte com um valor médio a escuro. ### Qual é o código hex do verde esmeralda? Uma boa esmeralda em tom de joia é `#00674F`. Esmeraldas mais claras como `#50C878` são comuns na web, mas lêem-se como um verde médio vivo e não como uma gema. ### Que cores combinam com tons de joia? Neutros quentes como marfim e creme, quase preto e pequenas quantidades de dourado suave. Um tom de joia costuma ficar melhor com, no máximo, outro tom de joia, usado como acento. ### Qual é a diferença entre tons de joia e tons de terra? Os tons de joia são puros e saturados; os tons de terra são os mesmos matizes puxados para o castanho e o cinzento. A esmeralda é um tom de joia, o verde-azeitona é um tom de terra. ### Os tons de joia servem para uma marca? Servem marcas que querem parecer ricas, estabelecidas ou festivas, como hotelaria, edição e produtos premium. Escolhe uma pedra como principal e deixa bastante espaço neutro à volta.