# Tons joia: códigos de esmeralda, safira, rubi e ametista

[Canonical HTML page](https://gradiently.design/pt-br/guide/jewel-tone-colors)

Esmeralda, safira, rubi e ametista parecem caros porque são profundos e saturados ao mesmo tempo. Aqui estão os códigos, as combinações que os mantêm ricos e os erros que os fazem parecer fantasia.

## The short version

- Tons joia são cores profundas e muito saturadas com nomes de pedras preciosas: 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 joia é a combinação de saturação forte com um valor médio a escuro, para que ela pareça iluminada por dentro, e não brilhante ou clara.
- Os tons joia ficam mais ricos ao lado de um neutro quente como o marfim, de um quase preto ou de uma pequena dose de dourado discreto.
- Esmeralda, safira, rubi e ametista passam no contraste WCAG AA para texto corrido sobre branco ou marfim com os códigos deste artigo.
- Use um tom joia como cor principal e no máximo um outro como destaque, porque um conjunto completo de pedras com a mesma força parece fantasia.

**Tons 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 todo mundo reconhece, com topázio, citrino, granada e turmalina logo atrás. Elas ocupam uma faixa estreita: muito mais ricas que os pastéis, mais escuras que o neon e nunca acinzentadas como os tons terrosos. Essa combinação é o motivo de parecerem valiosas, e de combinarem com eventos noturnos, campanhas de inverno, rótulos de vinho e qualquer marca que queira transmitir solidez sem partir para o preto.

## Códigos hex dos tons joia

Estes são códigos de trabalho, ajustados para parecer a pedra numa tela e para funcionar bem como texto. As pedras variam, então não existe uma esmeralda oficial única, mas estes valores ficam bem no centro 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 joia. Os quatro primeiros formam o conjunto clássico; topázio e citrino são os membros quentes e claros da família.

| Tom joia | Hex | RGB | Texto sobre branco |
| --- | --- | --- | --- |
| Esmeralda | `#00674F` | 0, 103, 79 | 6,88:1, passa no AA |
| Safira | `#0F52BA` | 15, 82, 186 | 7,15:1, passa no AAA |
| Rubi | `#9B111E` | 155, 17, 30 | 8,42:1, passa no AAA |
| Ametista | `#6A3D9A` | 106, 61, 154 | 7,64:1, passa no AAA |
| Turmalina azul-esverdeada | `#0E7C7B` | 14, 124, 123 | 5,01:1, passa no AA |
| Turmalina | `#B0185A` | 176, 24, 90 | 6,72:1, passa no AA |
| Topázio | `#D98E04` | 217, 142, 4 | use texto escuro sobre ele |
| Citrino | `#E1B000` | 225, 176, 0 | use texto escuro sobre ele |

O contraste é medido contra o branco puro. Topázio e citrino são claros demais para texto sobre branco, mas sustentam bem um texto quase preto: citrino com `#14141A` chega a 9,10:1.

Se você precisa destas cores em outro formato, [códigos de cores hex](https://gradiently.design/pt-br/guide/color-codes-explained) explica como hex, RGB e HSL se relacionam, e [hex para RGB](https://gradiently.design/pt-br/guide/hex-to-rgb) mostra a conversão à mão.

## O que faz de uma cor um tom joia

Dois ajustes, os dois ao mesmo tempo. A saturação é alta: a cor é pura, quase sem cinza. O valor é médio a escuro: fica bem abaixo do branco. Aumente o valor e a esmeralda vira menta; reduza a saturação e ela vira sálvia. Mantenha os dois e você tem o brilho da luz atravessando uma pedra lapidada.

### Não é tom joia

- Menta `#98E5C8`: clara demais, um pastel
- Sálvia `#8A9A84`: acinzentada, um tom apagado
- Lima `#7CFF3A`: viva e elétrica, um neon
- Floresta `#1F3B2C`: tão escura que parece quase preta

### Tom joia

- Esmeralda `#00674F`: verde puro num valor médio escuro
- Safira `#0F52BA`: azul saturado, claramente iluminado
- Rubi `#9B111E`: vermelho profundo que ainda brilha
- Ametista `#6A3D9A`: roxo com profundidade, sem cinza

É a mesma ideia que [matizes, tons e sombras](https://gradiently.design/pt-br/guide/tints-tones-shades) descreve: os tons joia são, em geral, matizes puros com um pouco de preto, raramente com branco ou cinza. Eles também ficam no extremo oposto dos [tons terrosos](https://gradiently.design/pt-br/guide/earth-tone-colors), que são os mesmos matizes puxados para o marrom.

## Paletas de tons joia para usar

Um tom joia precisa de algo discreto em volta. Sozinha, uma página de esmeralda é pesada; ao lado do marfim, parece intencional. Cada uma destas quatro paletas é liderada por uma pedra e acrescenta apoio na proporção certa.

- **Biblioteca esmeralda:** esmeralda `#00674F`, marfim `#F6EFE2`, dourado discreto `#C9A24A`, tinta `#14141A`. Clássica, literária, boa para editoras e bares.
- **Noite safira:** safira `#0F52BA`, meia-noite `#0B1430`, pérola `#EEF0F5`, citrino `#E1B000` como pequeno destaque. Calma e confiante.
- **Jantar rubi:** rubi `#9B111E`, granada `#6F1D2B`, creme `#F4EADB`, oliva `#5E6B3A`. Quente, generosa, feita para comida e vinho.
- **Ateliê ametista:** ametista `#6A3D9A`, ameixa `#3B1F4F`, linho `#F2ECE4`, turmalina azul-esverdeada `#0E7C7B`. Criativa e um pouco inesperada.

Use a [regra 60 30 10](https://gradiently.design/pt-br/guide/60-30-10-rule) como divisão inicial: o neutro cobre a maior parte da superfície, o tom joia fica com as formas grandes e o destaque ganha uma lasca. O dourado funciona melhor discreto; um dourado amarelo vivo ao lado da esmeralda logo parece fantasia.

## Gradientes em tons joia

Os tons joia formam alguns dos gradientes mais ricos que existem, porque cada um pode se dissolver na própria sombra sem ficar barrento. Mantenha vizinhos próximos no círculo cromático e deixe um fundo escuro fazer a maior parte do trabalho.

- Profundidade esmeralda: `radial-gradient(circle at 30% 25%, #10a37f 0%, #00674f 40%, #052a22 85%)`
- Safira em ascensão: `linear-gradient(150deg, #0b1430 0%, #0f52ba 60%, #4f86e6 100%)`
- Brilho rubi: `radial-gradient(circle at 70% 30%, #d4243a 0%, #9b111e 40%, #3a0710 90%)`
- Ametista para turmalina: `linear-gradient(160deg, #1e0f33 0%, #6a3d9a 55%, #b0185a 100%)`
- Esmeralda para 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 em tons joia. Cada um fica dentro de matizes vizinhos, então o meio da transição continua limpo.

Evite misturar o rubi direto com a esmeralda. Elas são complementares, então o ponto médio fica marrom; [gradientes barrentos](https://gradiently.design/pt-br/guide/muddy-gradients) explica por quê e como contornar isso passando por uma terceira cor ou por um fundo escuro.

## Onde os tons joia funcionam melhor

Os tons joia têm peso, então combinam com momentos que devem parecer pensados: um convite, um cardápio de estação, a capa de um relatório anual, o lançamento de algo que custa dinheiro de verdade. Use texto em marfim ou num tom claro do mesmo matiz e mantenha o layout enxuto.

Um convite vertical para um jantar de inverno com letras claras sobre um fundo profundo e rico

Um convite de 5×7 pol em 1500×2100. Um fundo profundo com texto claro é o movimento clássico dos tons joia.

Um post vertical para redes sociais anunciando um produto em edição limitada rubi sobre um fundo de cor profunda

Um post de Instagram em 1080×1350 para um produto limitado, deixando uma pedra definir o clima.

Muitas marcas recorrem aos tons joia no outono e no inverno, e é exatamente por isso que uma campanha de estação pode se confundir com a de todo mundo. Se você quer a riqueza sem a mesmice, um Mark do Gradiently dá a você um fundo em tom joia que só você pode exportar depois de reservá-lo, e ele mantém as suas palavras legíveis onde quer que estejam.

## Erros comuns com tons joia

- **Usar quatro pedras com força total.** Esmeralda, safira, rubi e ametista juntas parecem uma caixa de bombons. Escolha uma principal.
- **Combinar com branco puro.** Funciona pelo contraste, mas parece clínico. Um marfim quente faz a cor parecer mais profunda.
- **Colocar tons joia claros sob texto branco.** Citrino e topázio precisam de texto escuro; branco sobre citrino falha feio no contraste.
- **Imprimir sem prova.** Azuis e roxos saturados muitas vezes ficam fora da faixa CMYK e perdem vida no papel. Leia [RGB ou CMYK](https://gradiently.design/pt-br/guide/rgb-vs-cmyk) antes de enviar um arquivo.

## FAQ

### O que são tons joia?

Tons joia são cores profundas e saturadas com nomes de pedras preciosas, como verde-esmeralda, azul-safira, vermelho-rubi e roxo-ametista. Eles combinam saturação forte com um valor médio a escuro.

### Qual é o código hex do verde-esmeralda?

Um bom esmeralda em tom joia é `#00674F`. Esmeraldas mais claras como `#50C878` são comuns na web, mas parecem um verde médio vivo, e não uma pedra preciosa.

### Que cores combinam com tons joia?

Neutros quentes como marfim e creme, quase preto e pequenas doses de dourado discreto. Um tom joia costuma ficar melhor com no máximo um outro tom joia, usado como destaque.

### Qual é a diferença entre tons joia e tons terrosos?

Os tons joia são puros e saturados; os terrosos são os mesmos matizes puxados para o marrom e o cinza. Esmeralda é tom joia, oliva é tom terroso.

### Tons joia são bons para uma marca?

Combinam com marcas que querem transmitir riqueza, tradição ou celebração, como hotelaria, editoras e produtos premium. Escolha uma pedra como cor principal e mantenha bastante espaço neutro em volta.