Aprende la teoría del color de forma dinamica
<title>Luz & Tinta — RGB y CMYK</title> <style> @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');:root{ --void:#0B0E14; --void-2:#12161f; --paper:#EFEDE3; --paper-2:#e6e3d5; --ink:#171512; --r:#FF3355; --g:#2BFF88; --b:#2E7CFF; --c:#00A8CC; --m:#E4007C; --y:#F4D000; --line-dark: rgba(255,255,255,0.14); --line-light: rgba(0,0,0,0.14); }
*{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{ font-family:'IBM Plex Sans', sans-serif; background:var(--void); color:#EDEBE3; line-height:1.55; } h1,h2,h3, .display{ font-family:'Space Grotesk', sans-serif; font-weight:600; letter-spacing:-0.01em; } .mono{ font-family:'IBM Plex Mono', monospace; } a{ color:inherit; } img{max-width:100%;}
/* ---------- HERO ---------- */ .hero{ position:relative; display:grid; grid-template-columns:1fr 1fr; min-height:100vh; overflow:hidden; } .hero-half{ position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; } .hero-half.light{ background:var(--void); } .hero-half.ink{ background:var(--paper); }
.orb{ position:absolute; width:38vmin; height:38vmin; border-radius:50%; filter:blur(1px); animation: drift 14s ease-in-out infinite; } .light .orb{ mix-blend-mode:screen; } .ink .orb{ mix-blend-mode:multiply; }
.light .orb.r{ background:var(--r); left:26%; top:30%; animation-delay:0s;} .light .orb.g{ background:var(--g); left:46%; top:52%; animation-delay:-4.6s;} .light .orb.b{ background:var(--b); left:36%; top:20%; animation-delay:-9.2s;}
.ink .orb.c{ background:var(--c); left:26%; top:30%; animation-delay:0s;} .ink .orb.m{ background:var(--m); left:46%; top:52%; animation-delay:-4.6s;} .ink .orb.y{ background:var(--y); left:36%; top:20%; animation-delay:-9.2s;}
@keyframes drift{ 0%,100%{ transform:translate(0,0) scale(1); } 33%{ transform:translate(6%,-4%) scale(1.05); } 66%{ transform:translate(-5%,5%) scale(0.96); } }
.hero-label{ position:relative; z-index:2; text-align:center; padding:0 6vw; } .hero-label .eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; opacity:0.65; display:block; margin-bottom:0.9rem; } .hero-label h1{ font-size:clamp(2.2rem, 6vw, 4.4rem); line-height:0.95; } .light .hero-label{ color:#F4F2EA; } .ink .hero-label{ color:var(--ink); } .hero-label p{ margin-top:1rem; font-size:0.95rem; max-width:26ch; margin-left:auto; margin-right:auto; opacity:0.78; }
.hero-divider{ position:absolute; left:50%; top:0; bottom:0; width:1px; background:rgba(128,128,128,0.35); z-index:3; }
.scroll-cue{ position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%); z-index:4; font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.15em; text-transform:uppercase; opacity:0.5; color:#EDEBE3; text-align:center; } .scroll-cue span{ display:block; width:1px; height:22px; background:#EDEBE3; margin:0.5rem auto 0; opacity:0.6; }
/* ---------- NAV ---------- */ nav{ position:sticky; top:0; z-index:20; display:flex; justify-content:center; gap:0; background:rgba(11,14,20,0.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line-dark); } nav a{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; text-decoration:none; color:#c9c7bd; padding:0.9rem 1.3rem; border-right:1px solid var(--line-dark); transition:color .2s, background .2s; } nav a:last-child{ border-right:none; } nav a:hover{ color:#fff; background:rgba(255,255,255,0.04); }
/* ---------- SECTIONS ---------- */ section{ padding:7rem 6vw; } .section-intro{ max-width:640px; margin-bottom:3.5rem; } .section-intro .eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; opacity:0.6; display:block; margin-bottom:0.8rem; } .section-intro h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:1rem; } .section-intro p{ opacity:0.82; font-size:1.02rem; max-width:56ch; }
#rgb{ background:var(--void); } #cmyk{ background:var(--paper); color:var(--ink); } #cmyk .section-intro p{ color:var(--ink); opacity:0.72; } #compare{ background:var(--void-2); } #convert{ background:var(--paper-2); color:var(--ink); }
/* mixer layout */ .mixer{ display:grid; grid-template-columns: 1fr 1fr; gap:3.5rem; align-items:center; } @media (max-width:820px){ .mixer{ grid-template-columns:1fr; } }
.swatch-stage{ position:relative; aspect-ratio:1/1; border-radius:18px; overflow:hidden; border:1px solid var(--line-dark); } #cmyk .swatch-stage{ border:1px solid var(--line-light); background:#fff; } #rgb .swatch-stage{ background:#000; }
.swatch-orb{ position:absolute; width:58%; height:58%; border-radius:50%; } #rgb .swatch-orb{ mix-blend-mode:screen; } #cmyk .swatch-orb{ mix-blend-mode:multiply; } .swatch-orb.o1{ left:8%; top:16%; } .swatch-orb.o2{ left:34%; top:34%; } .swatch-orb.o3{ left:14%; top:38%; } .swatch-orb.o4{ left:30%; top:14%; width:40%; height:40%; }
.readout{ position:absolute; bottom:0.9rem; left:0.9rem; font-family:'IBM Plex Mono', monospace; font-size:0.85rem; padding:0.4rem 0.7rem; border-radius:6px; background:rgba(0,0,0,0.55); color:#fff; } #cmyk .readout{ background:rgba(255,255,255,0.85); color:var(--ink); }
.controls .row{ margin-bottom:1.3rem; } .controls label{ display:flex; justify-content:space-between; font-family:'IBM Plex Mono', monospace; font-size:0.78rem; letter-spacing:0.04em; margin-bottom:0.4rem; text-transform:uppercase; } input[type=range]{ width:100%; -webkit-appearance:none; appearance:none; height:6px; border-radius:4px; outline:none; background:rgba(255,255,255,0.15); } #cmyk input[type=range]{ background:rgba(0,0,0,0.15); } input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid rgba(0,0,0,0.3); cursor:pointer; margin-top:-6px; } input#r::-webkit-slider-thumb{ background:var(--r); } input#g::-webkit-slider-thumb{ background:var(--g); } input#b::-webkit-slider-thumb{ background:var(--b); } input#c::-webkit-slider-thumb{ background:var(--c); } input#m::-webkit-slider-thumb{ background:var(--m); } input#y::-webkit-slider-thumb{ background:var(--y); } input#k::-webkit-slider-thumb{ background:#333; }
.fact-strip{ margin-top:2.5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; } @media (max-width:820px){ .fact-strip{ grid-template-columns:1fr; } } .fact{ border-top:1px solid var(--line-dark); padding-top:0.8rem; } #cmyk .fact{ border-top:1px solid var(--line-light); } .fact .num{ font-family:'IBM Plex Mono', monospace; font-size:0.75rem; opacity:0.55; } .fact p{ font-size:0.92rem; margin-top:0.4rem; opacity:0.85; }
/* comparison table */ table{ width:100%; border-collapse:collapse; font-size:0.95rem; } th,td{ text-align:left; padding:1rem 1.2rem; border-bottom:1px solid var(--line-dark); } th{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; opacity:0.6; font-weight:400; } td.label{ font-family:'Space Grotesk', sans-serif; font-weight:600; opacity:0.9; } .tag{ display:inline-block; padding:0.2rem 0.55rem; border-radius:4px; font-family:'IBM Plex Mono', monospace; font-size:0.72rem; } .tag.additive{ background:rgba(43,255,136,0.15); color:#7CFFB3; } .tag.subtractive{ background:rgba(228,0,124,0.15); color:#FF7FBF; }
/* converter */ .convert-box{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem; max-width:820px; } @media (max-width:700px){ .convert-box{ grid-template-columns:1fr; } .convert-arrow{ transform:rotate(90deg); } } .convert-card{ background:#fff; border:1px solid var(--line-light); border-radius:14px; padding:1.6rem; } .convert-card h3{ font-size:1rem; margin-bottom:1rem; } .convert-swatch{ width:100%; height:64px; border-radius:8px; margin-bottom:1rem; border:1px solid var(--line-light); } .convert-vals{ font-family:'IBM Plex Mono', monospace; font-size:0.85rem; opacity:0.75; } .convert-arrow{ font-family:'IBM Plex Mono', monospace; font-size:1.4rem; opacity:0.5; }
footer{ padding:3rem 6vw; background:var(--void); border-top:1px solid var(--line-dark); font-family:'IBM Plex Mono', monospace; font-size:0.75rem; opacity:0.5; text-align:center; }
/* ---------- WHEEL SECTION ---------- */ #wheel{ background:var(--void); } .wheel-layout{ display:grid; grid-template-columns:auto 1fr; gap:4rem; align-items:start; } @media (max-width:900px){ .wheel-layout{ grid-template-columns:1fr; justify-items:center; } }
.wheel-wrap{ position:relative; width:min(360px,80vw); aspect-ratio:1/1; border-radius:50%; flex-shrink:0; background:conic-gradient(from 0deg, hsl(0,90%,55%), hsl(60,90%,55%), hsl(120,90%,55%), hsl(180,90%,55%), hsl(240,90%,55%), hsl(300,90%,55%), hsl(360,90%,55%)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); cursor:pointer; } .wheel-hole{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:46%; height:46%; border-radius:50%; background:var(--void); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0.5rem; } .wheel-hole .hex{ font-family:'IBM Plex Mono', monospace; font-size:0.85rem; opacity:0.85; } .wheel-hole .hname{ font-family:'IBM Plex Mono', monospace; font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; opacity:0.5; margin-top:0.3rem; }
.wheel-marker{ position:absolute; width:20px; height:20px; border-radius:50%; transform:translate(-50%,-50%); border:3px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,0.4); pointer-events:none; } .wheel-marker.base{ width:24px; height:24px; border-width:3px; z-index:5; }
.relation-btns{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom:1.6rem; } .relation-btns button{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase; padding:0.55rem 0.9rem; border-radius:20px; border:1px solid var(--line-dark); background:transparent; color:#EDEBE3; cursor:pointer; transition:background .2s, color .2s; } .relation-btns button.active{ background:#EDEBE3; color:var(--void); }
.swatch-chips{ display:flex; flex-wrap:wrap; gap:0.8rem; margin-top:1.4rem; } .chip{ display:flex; align-items:center; gap:0.6rem; border:1px solid var(--line-dark); border-radius:10px; padding:0.5rem 0.8rem; } .chip .dot{ width:18px; height:18px; border-radius:50%; border:1px solid rgba(255,255,255,0.3); flex-shrink:0; } .chip .chip-text{ display:flex; flex-direction:column; } .chip .chip-label{ font-family:'IBM Plex Mono', monospace; font-size:0.65rem; text-transform:uppercase; opacity:0.55; } .chip .chip-hex{ font-family:'IBM Plex Mono', monospace; font-size:0.8rem; }
.relation-note{ margin-top:1.6rem; font-size:0.92rem; opacity:0.78; max-width:52ch; }
/* ---------- HSL SECTION ---------- */ #hsl{ background:var(--void-2); } .hsl-demo{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:2rem; } @media (max-width:900px){ .hsl-demo{ grid-template-columns:1fr; } } .hsl-card{ border:1px solid var(--line-dark); border-radius:14px; padding:1.6rem; } .hsl-card h3{ font-size:1rem; margin-bottom:0.3rem; } .hsl-card .sub{ font-size:0.82rem; opacity:0.65; margin-bottom:1.2rem; } .hsl-swatch{ width:100%; height:80px; border-radius:10px; margin-bottom:1rem; border:1px solid var(--line-dark); } .hsl-card .readout{ position:static; display:inline-block; margin-bottom:1rem; background:rgba(255,255,255,0.06); color:#EDEBE3; } .hsl-card input[type=range]{ height:14px; border-radius:7px; } .hsl-card input[type=range]::-webkit-slider-thumb{ margin-top:-3px; }
/* ---------- MIXES SECTION ---------- */ #mixes{ background:var(--paper); color:var(--ink); } #mixes .section-intro p{ color:var(--ink); opacity:0.72; } .mix-bars{ display:flex; flex-direction:column; gap:1.6rem; max-width:640px; } .mix-bar-row label{ display:flex; justify-content:space-between; align-items:baseline; font-family:'IBM Plex Mono', monospace; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.5rem; opacity:0.7; } .mix-bar{ height:44px; border-radius:8px; border:1px solid var(--line-light); position:relative; } .mix-marker{ position:absolute; top:-6px; width:3px; height:56px; background:var(--ink); transform:translateX(-50%); } .mix-def{ font-size:0.9rem; opacity:0.75; margin-top:0.3rem; max-width:56ch; }
/* ---------- RYB SECTION ---------- */ #ryb{ background:var(--void); } .primary-systems{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-bottom:3rem; } @media (max-width:820px){ .primary-systems{ grid-template-columns:1fr; } } .system-card{ border:1px solid var(--line-dark); border-radius:14px; padding:1.4rem; } .system-card h4{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; opacity:0.6; margin-bottom:0.9rem; } .system-dots{ display:flex; gap:0.6rem; margin-bottom:0.8rem; } .system-dots span{ width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,0.25); } .system-card p{ font-size:0.85rem; opacity:0.75; }
#rybReadout{ position:absolute; }
/* ---------- WARM / COOL ---------- */ #warmcool{ background:var(--void-2); } .wc-layout{ display:grid; grid-template-columns:auto 1fr; gap:4rem; align-items:center; } @media (max-width:900px){ .wc-layout{ grid-template-columns:1fr; justify-items:center; } } .wc-wheel{ position:relative; width:min(280px,70vw); aspect-ratio:1/1; border-radius:50%; background:conic-gradient(from 0deg, #E4572E 0deg, #E4572E 75deg, #2E7CFF 75deg, #2E7CFF 255deg, #E4572E 255deg, #E4572E 360deg); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); } .wc-marker{ position:absolute; width:22px; height:22px; border-radius:50%; transform:translate(-50%,-50%); border:3px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,0.4); } .wc-label{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--void-2); border-radius:50%; width:44%; height:44%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; } .wc-label .tag-word{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.1rem; } .wc-label .hex{ font-family:'IBM Plex Mono', monospace; font-size:0.75rem; opacity:0.7; margin-top:0.3rem; } .wc-note{ margin-top:1.6rem; font-size:0.92rem; opacity:0.78; max-width:52ch; } </style>
Los píxeles de una pantalla no contienen pintura: emiten luz. Cada píxel es en realidad tres subpíxeles diminutos —rojo, verde y azul— tan juntos que el ojo los funde en un solo color. Mezclar significa sumar longitudes de onda: a más luz de los tres canales, más cerca del blanco. Sin ningún canal encendido, el resultado es negro absoluto: ausencia total de luz.
Rojo, verde y azul: las tres longitudes de onda que los conos del ojo humano detectan mejor.
Monitores, televisores, celulares, cámaras y cualquier dispositivo que emita luz directamente al ojo.
R255 G255 B255 da blanco. Es la suma de toda la luz visible que el dispositivo puede emitir.
El papel no emite luz propia: refleja la luz ambiente, y la tinta actúa como un filtro que absorbe parte de esa luz antes de que llegue al ojo. Cada tinta —cian, magenta, amarilla— resta un tercio del espectro. Superponer las tres debería dar negro, pero las tintas reales son impuras y producen un marrón sucio; por eso se agrega una cuarta tinta, la K (key, o negro puro), que además abarata la impresión de texto.
Cian, magenta y amarillo: los pigmentos que mejor absorben rojo, verde y azul respectivamente.
Imprentas, cartuchos de inyección de tinta, tóner láser: cualquier superficie que refleja luz en vez de emitirla.
C100 M100 Y100 sin K da un marrón casi negro, nunca un negro puro. Por eso existe la K.
La diferencia no es solo técnica: define para qué sirve cada modelo y por qué un mismo diseño se ve distinto en la pantalla que en la hoja impresa.
| Propiedad | RGB | CMYK |
|---|---|---|
| Naturaleza | Aditiva — suma luz | Sustractiva — resta luz |
| Primarios | Rojo, verde, azul | Cian, magenta, amarillo, negro |
| Punto de partida | Negro (oscuridad) | Blanco (papel) |
| Suma total | Blanco | Marrón casi negro |
| Medio | Pantallas, luz emitida | Papel, tinta reflejada |
| Gama de color | Más amplia, sobre todo en verdes y azules brillantes | Más acotada; algunos colores de pantalla no se pueden imprimir fielmente |
| Cuándo usarlo | Diseño digital: web, apps, video | Diseño para imprenta: papelería, packaging, revistas |
No existe una fórmula exacta —depende de la tinta, el papel y la impresora— pero esta aproximación matemática muestra la idea: cada canal de tinta es, más o menos, el complemento del canal de luz correspondiente.
Todo el círculo se construye a partir de los colores subyacentes: tres primarios, sus tres mezclas secundarias y seis terciarios entre medio. Una vez trazado, cada relación armónica es simplemente una figura geométrica girando sobre ese círculo. Elegí un matiz de base y una relación para ver dónde caen los demás.
<div>
<div class="controls" style="max-width:420px; margin-bottom:1.6rem;">
<div class="row">
<label><span>Matiz de base</span><span id="wheelHueVal">0°</span></label>
<input type="range" id="wheelHue" min="0" max="359" value="0">
</div>
</div>
<div class="relation-btns" id="relationBtns">
<button data-rel="complement" class="active">Complementarios</button>
<button data-rel="analog">Análogos</button>
<button data-rel="triad">Triádicos</button>
<button data-rel="split">Divididos (quebrados)</button>
</div>
<p class="relation-note" id="relationNote"></p>
<div class="swatch-chips" id="chips"></div>
</div>
Cualquier color puede describirse con tres números: qué familia de color es (matiz), qué tan intenso o apagado está (saturación) y qué tan claro u oscuro es (luminosidad). Moví cada control por separado para aislar lo que cambia.
Partiendo de un mismo matiz saturado, agregarle blanco, gris o negro produce tres familias distintas. Es la lógica detrás de cualquier paleta con variantes claras y oscuras de un mismo color.
El tinte aclara sin apagar: sigue siendo un color vivo, solo más pálido. Es lo que en pintura se llama "aclarar".
El tono resta pureza sin mover la luminosidad: nace un color "quebrado" o roto, apagado y terroso. En la práctica también se logra mezclando un color con su complementario en proporciones desiguales.
La sombra oscurece sin blanquear: es el color "entrando en la noche", cada vez más cerca del negro.
Antes de que existieran pantallas o imprentas industriales, ya había pintores mezclando pigmentos en una paleta. Esa tradición —la que se enseña en la primaria como "los tres colores primarios"— no usa cian y magenta sino rojo, amarillo y azul. No es un modelo óptico como RGB ni un estándar de imprenta como CMYK: es un modelo pedagógico, heredado de siglos de práctica pictórica, y no tiene una fórmula física exacta detrás. Por eso el mezclador de abajo es una aproximación —basada en cómo se comportan los pigmentos reales— y no una conversión matemática precisa como las anteriores.
Cian, magenta, amarillo. Primarios de imprenta: absorben con precisión un tercio del espectro cada uno.
Rojo + amarillo = naranja. Amarillo + azul = verde. Azul + rojo = violeta.
Es intuitivo y fácil de enseñar con pintura real, aunque el cian y el magenta mezclen colores de forma más pura y predecible.
Como en cualquier mezcla sustractiva de pigmentos, rojo + amarillo + azul en partes iguales tiende a un marrón oscuro, no a un negro puro.
Además de matiz, saturación y luminosidad, cada color tiene una temperatura percibida. La rueda se divide, aproximadamente, por el eje que va del amarillo-verde al rojo-violeta: de un lado los colores que evocan fuego y luz solar; del otro, los que evocan agua, sombra y cielo. Los bordes —verdes y violetas— son los más ambiguos: su temperatura depende del matiz exacto hacia el que se inclinen.
Los cálidos tienden a "avanzar" — se sienten más cerca del ojo y dan sensación de energía. Los fríos tienden a "retroceder" — dan sensación de calma y profundidad. Es un recurso constante en pintura y diseño para crear jerarquía visual sin cambiar el tamaño de nada.