Lesson 3 · Lección 3 · Colores y Estilo
Color is what makes a visualization come alive. In this lesson you'll learn how Three.js represents colors, how the PALETTE works, and how to pick colors that represent your community.
Los colores hacen que una visualización cobre vida. Aprende cómo Three.js representa colores y cómo elegir los tuyos.
Three.js (and CSS!) represent colors as hexadecimal numbers. A hex color has 6 digits — two for Red, two for Green, two for Blue:
# CSS / HTML: #c0541a # Three.js: 0xc0541a # ^^ ^^ ^^ # RR GG BB c0 = 192 red # high red → warm/orange 54 = 84 green # medium green 1a = 26 blue # low blue → no purple/cool
The 0x prefix means "this is a hexadecimal number."
In CSS you use # instead. They mean the same color!
Hex uses digits 0–9 and letters a–f.
00 = 0 (none), ff = 255 (full).
So ff0000 is pure red, 0000ff is pure blue.
Type any 6-digit hex code below and watch the preview update:
Try these: 2e8b57 (Chinese green) · e6b800 (gold band)
· 1a0a00 (background night) · ff5533 (bright orange)
Open docs/js/visualization.js. Near the top you'll find:
const PALETTE = { // Spanish: warm terracotta + blue Talavera band spanish: { base: 0xc0541a, // Main pedestal body band: 0x1a5fc0, // Decorative ring at top }, // Chinese: sage green + gold band chinese: { base: 0x2e8b57, band: 0xe6b800, }, };
Each entry has two colors: base for the cylinder body
and band for the decorative ring near the top.
The design is inspired by Talavera pottery —
the beautiful painted ceramics of Mexico and Spain.
Want to add Vietnamese, Tagalog, or another Oakland language?
Just add a new entry to PALETTE:
const PALETTE = { spanish: { base: 0xc0541a, band: 0x1a5fc0 }, chinese: { base: 0x2e8b57, band: 0xe6b800 }, // 🇻🇳 Vietnamese: deep red + gold (colors of Vietnam) vietnamese: { base: 0xcc0000, band: 0xffdd00 }, // 🇵🇭 Tagalog: blue + red (colors of Philippines) tagalog: { base: 0x003893, band: 0xce1126 }, };
Cultural tip: Try choosing colors that connect to the
community — national flag colors, traditional textile colors, or colors
meaningful to that culture. Ask community members what colors feel right!
Elige colores que conecten con la comunidad — colores de la bandera,
textiles tradicionales, o colores con significado cultural.
Open docs/js/visualization.js. Find the PALETTE
object. Change the Spanish base color to something new —
try 0xff5533 for a bright orange.
Save, refresh your local server, and see what happens!
Abre visualization.js. Cambia el color base
del español a algo nuevo. ¡Guarda y refresca!