# Tonos joya: códigos de esmeralda, zafiro, rubí y amatista [Canonical HTML page](https://gradiently.design/es/guide/jewel-tone-colors) La esmeralda, el zafiro, el rubí y la amatista parecen caros porque son profundos y saturados a la vez. Aquí tienes los códigos, las combinaciones que los mantienen ricos y los errores que los hacen parecer un disfraz. ## The short version - Los tonos joya son colores profundos y muy saturados con nombre de gema: verde esmeralda, azul zafiro, rojo rubí, morado amatista, además de topacio, citrino, granate y turmalina. - Lo que hace de un color un tono joya es la combinación de saturación fuerte y un valor de medio a oscuro, de modo que parece iluminado desde dentro y no brillante ni pálido. - Los tonos joya lucen más ricos junto a un neutro cálido como el marfil, un casi negro o una pequeña cantidad de oro apagado. - La esmeralda, el zafiro, el rubí y la amatista superan el contraste WCAG AA para texto corrido sobre blanco o marfil con los códigos de este artículo. - Usa un tono joya como color principal y como mucho otro como acento, porque un juego completo de gemas con la misma fuerza parece un disfraz. Los **tonos joya** son colores profundos y saturados con nombre de piedra preciosa: esmeralda `#00674F`, zafiro `#0F52BA`, rubí `#9B111E` y amatista `#6A3D9A` son los cuatro que todo el mundo reconoce, con topacio, citrino, granate y turmalina muy cerca. Se sitúan en una banda estrecha: mucho más ricos que los pasteles, más oscuros que el neón y nunca apagados como los colores tierra. Esa combinación es la razón de que parezcan valiosos y de que vayan bien con eventos de noche, campañas de invierno, etiquetas de vino y cualquier marca que quiera sentirse sustanciosa sin irse al negro. ## Códigos hex de tonos joya Son códigos de trabajo, ajustados para parecerse a la piedra en pantalla y para aguantar como texto. Las gemas varían, así que no existe una esmeralda oficial única, pero estos valores caen de lleno en lo que la gente imagina. - Esmeralda: #00674f - Zafiro: #0f52ba - Rubí: #9b111e - Amatista: #6a3d9a - Topacio: #d98e04 - Citrino: #e1b000 - Granate: #6f1d2b - Turmalina: #b0185a - Turmalina azulada: #0e7c7b Nueve tonos joya. Los cuatro primeros son el conjunto clásico; el topacio y el citrino son los miembros cálidos y claros de la familia. | Tono joya | Hex | RGB | Texto sobre blanco | | --- | --- | --- | --- | | Esmeralda | `#00674F` | 0, 103, 79 | 6,88:1, cumple AA | | Zafiro | `#0F52BA` | 15, 82, 186 | 7,15:1, cumple AAA | | Rubí | `#9B111E` | 155, 17, 30 | 8,42:1, cumple AAA | | Amatista | `#6A3D9A` | 106, 61, 154 | 7,64:1, cumple AAA | | Turmalina azulada | `#0E7C7B` | 14, 124, 123 | 5,01:1, cumple AA | | Turmalina | `#B0185A` | 176, 24, 90 | 6,72:1, cumple AA | | Topacio | `#D98E04` | 217, 142, 4 | usa texto oscuro encima | | Citrino | `#E1B000` | 225, 176, 0 | usa texto oscuro encima | El contraste se mide contra blanco puro. El topacio y el citrino son demasiado claros para texto sobre blanco, pero sostienen bien texto casi negro: el citrino con `#14141A` llega a 9,10:1. Si los necesitas en otro formato, [códigos de color hex](https://gradiently.design/es/guide/color-codes-explained) explica cómo se relacionan hex, RGB y HSL, y [de hex a RGB](https://gradiently.design/es/guide/hex-to-rgb) muestra la conversión a mano. ## Qué hace de un color un tono joya Dos ajustes, los dos a la vez. La saturación es alta: el color es puro, casi sin gris. El valor es de medio a oscuro: queda muy por debajo del blanco. Sube el valor y la esmeralda se vuelve menta; baja la saturación y se vuelve salvia. Mantén ambos y obtienes el brillo de la luz atravesando una piedra tallada. ### No es un tono joya - Menta `#98E5C8`: demasiado claro, un pastel - Salvia `#8A9A84`: apagado con gris, un tono suave - Lima `#7CFF3A`: vivo y eléctrico, un neón - Bosque `#1F3B2C`: tan oscuro que parece casi negro ### Tono joya - Esmeralda `#00674F`: verde puro de valor medio oscuro - Zafiro `#0F52BA`: azul saturado, claramente iluminado - Rubí `#9B111E`: rojo profundo que aún brilla - Amatista `#6A3D9A`: morado con profundidad, no gris Es la misma idea que describen los [tintes, tonos y sombras](https://gradiently.design/es/guide/tints-tones-shades): los tonos joya son sobre todo matices puros con un poco de negro añadido, rara vez con blanco o gris. También están en el extremo opuesto de los [colores tierra](https://gradiently.design/es/guide/earth-tone-colors), que son los mismos matices llevados hacia el marrón. ## Paletas de tonos joya que puedes usar Un tono joya necesita algo tranquilo alrededor. Solo, una página de esmeralda pesa; junto al marfil, parece deliberada. Cada una de estas cuatro paletas lidera con una piedra y añade apoyo en la proporción adecuada. - **Biblioteca esmeralda:** esmeralda `#00674F`, marfil `#F6EFE2`, oro apagado `#C9A24A`, tinta `#14141A`. Clásica, libresca, buena para editoriales y bares. - **Noche zafiro:** zafiro `#0F52BA`, medianoche `#0B1430`, perla `#EEF0F5`, citrino `#E1B000` como pequeño acento. Calmada y segura. - **Cena rubí:** rubí `#9B111E`, granate `#6F1D2B`, crema `#F4EADB`, oliva `#5E6B3A`. Cálida, generosa, hecha para comida y vino. - **Estudio amatista:** amatista `#6A3D9A`, ciruela `#3B1F4F`, lino `#F2ECE4`, turmalina azulada `#0E7C7B`. Creativa y algo inesperada. Usa la [regla 60 30 10](https://gradiently.design/es/guide/60-30-10-rule) como reparto inicial: el neutro cubre la mayor parte de la superficie, el tono joya se lleva las formas grandes y el acento recibe una franja. El oro funciona mejor apagado; un oro amarillo vivo junto a la esmeralda parece enseguida un disfraz. ## Degradados de tonos joya Los tonos joya dan algunos de los degradados más ricos que existen, porque cada uno puede fundirse en su propia sombra sin ensuciarse. Mantén cerca a los vecinos del círculo cromático y deja que un fondo oscuro haga casi todo el trabajo. - Profundidad esmeralda: `radial-gradient(circle at 30% 25%, #10a37f 0%, #00674f 40%, #052a22 85%)` - Ascenso zafiro: `linear-gradient(150deg, #0b1430 0%, #0f52ba 60%, #4f86e6 100%)` - Resplandor rubí: `radial-gradient(circle at 70% 30%, #d4243a 0%, #9b111e 40%, #3a0710 90%)` - De amatista a turmalina: `linear-gradient(160deg, #1e0f33 0%, #6a3d9a 55%, #b0185a 100%)` - De esmeralda a zafiro: `linear-gradient(135deg, #00674f 0%, #0e7c7b 50%, #0f52ba 100%)` - Citrino sobre granate: `radial-gradient(circle at 50% 20%, #e1b000 0%, #d98e04 30%, #6f1d2b 95%)` Seis degradados de tonos joya. Cada uno se mantiene dentro de matices vecinos, así que el centro de la mezcla queda limpio. Evita mezclar el rubí directamente con la esmeralda. Son complementarios, así que el punto medio se vuelve marrón; [degradados sucios](https://gradiently.design/es/guide/muddy-gradients) explica por qué y cómo rodearlo con un tercer color o un fondo oscuro. ## Dónde funcionan mejor los tonos joya Los tonos joya tienen peso, así que van con momentos que deben sentirse cuidados: una invitación, una carta de temporada, la portada de un informe anual, un lanzamiento de algo que cuesta dinero de verdad. Compón el texto en marfil o en un tinte pálido del mismo matiz, y mantén la maquetación sobria. Una invitación vertical para una cena de invierno con letras pálidas sobre un fondo profundo y rico Una invitación de 5×7 in a 1500×2100. Un fondo profundo con texto pálido es la jugada clásica de los tonos joya. Una publicación vertical para redes que anuncia un producto de edición limitada en rubí sobre un fondo de color profundo Una publicación de Instagram a 1080×1350 para un producto limitado, dejando que una piedra marque el ambiente. Muchas marcas recurren a los tonos joya en otoño e invierno, y precisamente por eso una campaña de temporada puede confundirse con la de todos los demás. Si quieres la riqueza sin la uniformidad, un Mark de Gradiently te da un fondo en tonos joya con el que solo tú puedes exportar una vez que lo reservas, y mantiene legibles tus palabras donde sea que estén. ## Errores comunes con los tonos joya - **Usar cuatro piedras a plena fuerza.** Esmeralda, zafiro, rubí y amatista juntos parecen una caja de caramelos. Elige un protagonista. - **Combinarlos con blanco puro.** Funciona por contraste, pero resulta clínico. Un marfil cálido hace que el color parezca más profundo. - **Poner tonos joya claros bajo texto blanco.** El citrino y el topacio necesitan texto oscuro; el blanco sobre citrino falla mucho el contraste. - **Imprimir sin prueba.** Los azules y morados saturados suelen quedar fuera del rango CMYK y se apagan en papel. Lee [RGB frente a CMYK](https://gradiently.design/es/guide/rgb-vs-cmyk) antes de enviar un archivo. ## FAQ ### ¿Qué son los tonos joya? Los tonos joya son colores profundos y saturados con nombre de gema, como el verde esmeralda, el azul zafiro, el rojo rubí y el morado amatista. Combinan una saturación fuerte con un valor de medio a oscuro. ### ¿Cuál es el código hex del verde esmeralda? Una buena esmeralda de tono joya es `#00674F`. Las esmeraldas más claras como `#50C878` son comunes en la web, pero parecen un verde medio vivo y no una gema. ### ¿Qué colores combinan con los tonos joya? Neutros cálidos como el marfil y el crema, el casi negro y pequeñas cantidades de oro apagado. Un tono joya suele lucir mejor con como mucho otro tono joya, usado como acento. ### ¿Cuál es la diferencia entre tonos joya y colores tierra? Los tonos joya son puros y saturados; los colores tierra son los mismos matices llevados hacia el marrón y el gris. La esmeralda es un tono joya, el oliva es un color tierra. ### ¿Son buenos los tonos joya para una marca? Van bien con marcas que quieren sentirse ricas, consolidadas o festivas, como hostelería, editorial y productos premium. Elige una piedra como protagonista y deja mucho espacio neutro a su alrededor.