La versión corta
- Un degradado turquesa mezcla azules verdosos brillantes y resulta más natural si incluye también un azul más profundo y un reflejo claro, casi blanco.
- El turquesa es más claro y brillante que el verde azulado y más verde que el cian; el color CSS turquoise es #40e0d0.
- Los degradados turquesa planos parecen sintéticos, así que añade profundidad con un fondo azul marino, un reflejo pálido o un color arena cálido.
- El texto blanco no funciona sobre turquesa brillante; usa en su lugar un azul marino profundo como #083344.
- Arena, coral y blanco son los compañeros más naturales del turquesa porque recuerdan a una playa.
En esta página
Un degradado turquesa mezcla azules brillantes y verdosos, y los que resultan de verdad tropicales tienen tres cosas: un reflejo pálido donde da la luz, un cuerpo turquesa limpio y un azul más profundo debajo. Sin ese rango, el turquesa se ve plano y sintético. Abajo tienes códigos para lagunas brillantes, turquesa con profundidad real y turquesa junto a arena cálida, seguidos del CSS y de los colores de texto que lo mantienen todo legible.
Turquesa, verde azulado, cian y aguamarina comparados
Estos cuatro se usan como si fueran lo mismo, pero son colores distintos, y elegir el adecuado cambia el ambiente. El turquesa es el más brillante y el más vacacional del grupo.
#40e0d0Qué transmite
Hex típico
#7fffd4 (aquamarine)Qué transmite
#00ffff (cyan de CSS)Qué transmite
Hex típico
#008080 (teal de CSS)Qué transmite
Si tu marca busca calma y seriedad, probablemente te convengan más los degradados verde azulado. Si busca vacaciones, energía y calidez, quédate aquí.
Degradados turquesa tropicales y brillantes
Son las mezclas de postal: agua poco profunda sobre arena blanca. Cada una incluye una parada pálida para que el turquesa tenga algo contra lo que brillar, y ninguna acaba en gris.
Cómo dar profundidad a un degradado turquesa
El agua tropical de verdad nunca es de un solo color. Es pálida sobre la arena, turquesa sobre el arrecife poco profundo y azul oscuro donde el fondo cae. Copia esa estructura y tu degradado dejará de parecer un relleno plano.
- 1
Elige un fondo
Escoge un azul profundo para la parte más oscura, como
#0c4a6eo#083344. Ancla el turquesa y le da algo contra lo que brillar. - 2
Define el cuerpo
Usa tu turquesa, entre
#2dd4bfy#40e0d0, en la mayor parte de la superficie, normalmente el centro o la parte superior. - 3
Añade un reflejo
Coloca una parada pequeña, casi blanca, como
#ecfeff, donde daría la luz. Un degradado radial en una esquina funciona bien. - 4
Calienta un borde
Si quieres, pasa un color arena por la parte inferior o por una esquina, para que la mezcla fría tenga una orilla cálida.
- 5
Termina la superficie
Añade un grano ligero para que los colores brillantes no formen bandas cuando la plataforma comprima tu imagen. Los degradados con grano explican el método.
Degradados turquesa y arena
El compañero más natural del turquesa es la propia playa: arena cálida, coral y blanco. Estos colores quedan frente al turquesa en el círculo cromático, así que mézclalos solo donde la saturación sea baja, a través de paradas pálidas, o déjalos como zonas separadas. Así consigues una orilla y no una mancha gris. Las paletas de colores de verano tienen más combinaciones vacacionales.
Dónde funciona mejor un degradado turquesa
El turquesa es llamativo, así que se gana su sitio donde la gente ya espera vacaciones, agua o diversión. Algunos usos en los que supera a cualquier otro color:
- Viajes y hoteles: una story de 1080×1920 con «Desnivel» detrás de una sola frase como «Tres noches en Lisboa».
- Escuelas de natación y piscinas: un fondo pálido de «Agua poco profunda» para horarios, con texto azul marino profundo.
- Bares de batidos y marcas de zumos: «Laguna» con una pegatina de precio coral, que destaca porque está frente al turquesa.
- Cartas de verano y carteles de festivales: «Orilla» en un cartel A4, el mar arriba y la arena donde van los detalles.
- Joyería: el turquesa también es una piedra, así que un «Luz a través del agua» profundo detrás de fotos de producto en plata u oro queda justo.
Evítalo para todo lo que deba sentirse tranquilo o formal. A un despacho de abogados o a una funeraria les irá mejor con verde azulado o azul marino.
CSS de degradado turquesa con luz
Superponer dos reflejos radiales sobre una base lineal da la impresión de luz del sol a través del agua. Es ligero de renderizar y no necesita imagen. La sintaxis se explica en degradados radiales en CSS.
.section-tropical {
background-color: #0891b2; /* fallback */
background-image:
radial-gradient(circle at 20% 15%, rgb(236 254 255 / 0.9) 0%, transparent 30%),
radial-gradient(circle at 80% 40%, rgb(64 224 208 / 0.8) 0%, transparent 45%),
linear-gradient(180deg, #5eead4 0%, #0891b2 60%, #083344 100%);
color: #083344;
}Texto sobre un degradado turquesa
El turquesa es mucho más claro de lo que parece. El blanco sobre #40e0d0 mide unos 1,6 a 1, algo que nadie puede leer con comodidad al sol en un móvil. El agua profunda #083344 sobre el mismo turquesa mide unos 8 a 1. Usa texto azul marino oscuro en las zonas brillantes y cambia a blanco solo donde el degradado haya caído a un azul profundo. Para las reglas completas, consulta contraste de color y accesibilidad.
Las palabras claras sobre turquesa brillante se desvanecen en cuanto alguien las mira al aire libre.
La misma publicación con el color del texto y la zona tranquila elegidos para las palabras.
Esto es exactamente lo que hace por sí solo un Mark de Gradiently: su región más tranquila se mueve detrás de las palabras y la tinta automática elige texto claro u oscuro en cada línea a partir de los propios colores del Mark. Los equipos de viajes y hostelería que publican a diario encontrarán más ideas en redes sociales para agencias de viajes.
Preguntas frecuentes
¿Cuál es el código hex del turquesa?
El color CSS turquoise es #40e0d0. También se usan mucho versiones algo más profundas, como #2dd4bf.
¿Qué colores combinan con un degradado turquesa?
Azul marino profundo, blanco, arena y coral. El azul marino da profundidad, el blanco da luz, y la arena o el coral aportan calidez si se mantienen fuera de la mezcla principal.
¿Es el turquesa lo mismo que el verde azulado?
No. El turquesa es más claro, más brillante y más tropical; el verde azulado es más profundo y apagado. Ambos están entre el azul y el verde.
¿Puedo usar texto blanco sobre turquesa?
No sobre turquesa brillante, donde el blanco suspende el contraste con claridad. Usa texto azul marino profundo, o lleva el texto blanco a la parte azul más oscura del degradado.
¿Cómo hago que un degradado turquesa se vea menos plano?
Añade un fondo azul profundo, un reflejo casi blanco y un grano ligero. Con esos tres pasos se lee como agua y no como un relleno plano.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil