Paleta de colores Uchū para amantes de internet

 (uchu.style)
2 puntos por GN⁺ 2025-02-17 | 1 comentarios | Compartir por WhatsApp
  • Uchū es una paleta de colores para amantes de internet creada por NetOperator Wibby, ofrecida principalmente como una lista de valores oklch() en lugar de nombres de colores
  • La paleta se divide en 8 grupos de colores, y cada grupo está compuesto por 9 niveles de valores oklch(L C H)
  • El primer grupo es una gama de baja saturación, con saturación en el rango de 0.002~0.004, y los demás parecen corresponder, según el ángulo de tono, a gamas como rojo, rosa, morado, azul, verde, amarillo y naranja
  • No se ofrecen nombres por color, ejemplos de aplicación, muestras de código, método de descarga ni información de licencia
  • Para usarla en un sistema de diseño o tema, hay que copiar y aplicar directamente los valores OKLCH proporcionados

Forma básica de la paleta Uchū

  • Uchū es una paleta de colores presentada con la descripción “the color palette for internet lovers”
  • El autor figura como NetOperator Wibby
  • La paleta se centra más en una lista de valores oklch() que en texto descriptivo, y cada valor especifica un color mediante tres números correspondientes a luminosidad, saturación y ángulo de tono

Cómo está compuesta la paleta

  • La paleta completa está compuesta por 8 grupos de colores
  • Cada grupo contiene 9 valores oklch()
  • La numeración de niveles aparece en cada grupo desde ### 2 hasta ### 9, y el primer valor se coloca antes sin un título numérico separado

Rangos OKLCH por grupo de colores

  • Gama de baja saturación

    • Los valores de saturación están en el rango de 0.002~0.004
    • Valor inicial: oklch(0.9557 0.003 286.35)
    • Valor final: oklch(0.5682 0.004 247.89)

  • Ángulos de tono que parecen corresponder a gamas de rojo y rosa

    • El segundo grupo tiene ángulos de tono aproximadamente en el rango de 3~19
      • Valor inicial: oklch(0.8898 0.052 3.28)
      • Valor final: oklch(0.4117 0.157 16.58)
    • El tercer grupo tiene ángulos de tono aproximadamente en el rango de 352~355
      • Valor inicial: oklch(0.958 0.023 354.27)
      • Valor final: oklch(0.5768 0.074 353.14)

  • Ángulos de tono que parecen corresponder a gamas de morado y azul

    • El cuarto grupo tiene ángulos de tono aproximadamente en el rango de 298~305
      • Valor inicial: oklch(0.891 0.046 305.24)
      • Valor final: oklch(0.3601 0.145 298.35)
    • El quinto grupo tiene ángulos de tono aproximadamente en el rango de 258~260
      • Valor inicial: oklch(0.8966 0.046 260.67)
      • Valor final: oklch(0.3953 0.15 259.87)

  • Ángulos de tono que parecen corresponder a gamas de verde, amarillo y naranja

    • El sexto grupo tiene ángulos de tono aproximadamente en el rango de 144~149
      • Valor inicial: oklch(0.9396 0.05 148.74)
      • Valor final: oklch(0.5277 0.138 145.41)
    • El séptimo grupo tiene ángulos de tono aproximadamente en el rango de 91~92
      • Valor inicial: oklch(0.9705 0.039 91.2)
      • Valor final: oklch(0.6229 0.097 91.9)
    • El octavo grupo tiene ángulos de tono aproximadamente en el rango de 51~57
      • Valor inicial: oklch(0.9383 0.037 56.93)
      • Valor final: oklch(0.5249 0.113 51.98)

Puntos a revisar al usarla

  • No se proporcionan nombres de color para cada grupo
  • No se incluyen ejemplos de aplicación en temas, muestras de código, método de descarga ni información de licencia
  • Los usuarios finales deben copiar directamente los valores oklch() de la lista para usarlos al construir una paleta o un tema

Lecturas relacionadas

1 comentarios

 
GN⁺ 2025-02-17
Opiniones de Hacker News

  • Hoy descubrí oklch()
    https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...

  • Me da curiosidad por qué usaron la palabra uchu
    Últimamente parece que casi todo —paletas de colores, modelos de IA, startups, herramientas, apps, etc.— recibe como nombre una palabra japonesa elegida al azar, y no sé por qué

    • No quiero sonar negativo, pero siento que ya se está usando un poco de más
      Curiosamente, en Japón pasa lo mismo con palabras en inglés que parecen elegidas al azar, así que no parece ser algo completamente sin precedentes
    • Me pregunto si también te molestan nombres de productos como Galaxy o Forester
      Quejarse de nombres de producto de una sola palabra se ve bastante raro. No sé si el problema es el idioma de origen de la palabra, si da celos que usen una palabra de dos sílabas en vez de una palabra larga como Navigator, o si no te gusta porque no tiene una sola sílaba como Chrome
      Me pregunto si Ubuntu está bien porque no es japonés, o si lo que quieres decir es que también habría que retirar nombres como Twitter o Yahoo y que todos pasen a una sola letra como X
    • “uchū” significa universo en japonés
      Uso este tema en todos mis proyectos, así que, por decirlo de algún modo, tiene el sentido de ser universal
      No sé sobre otros casos, pero personalmente me gusta el estilo o la estética japonesa, así que si una palabra encaja bien, intento usarla
    • Las palabras cortas y pronunciables son escasas
      Si quieres un nombre de proyecto de 4 a 6 letras, las palabras japonesas muchas veces cumplen bien esas condiciones, y la cultura japonesa también está muy difundida en el extranjero
    • A medida que las generaciones más jóvenes crecen más familiarizadas con la cultura japonesa, como el anime, los videojuegos y referencias culturales no retro, parece que nombran las cosas con palabras que les suenan bien

  • Me pregunto si hicieron un análisis de legibilidad con esto
    El contraste entre fondo y primer plano parece demasiado bajo como para leer durante mucho tiempo con comodidad

    • Creo que hoy en día se pone demasiado foco en la legibilidad
      En mi trabajo hay un equipo nuevo que está haciendo que se mida todo el contraste para personas con dificultades de lectura. Que el contraste debe ser de más del 80%, que el tamaño de letra también debe ser enorme, que no se puedan cambiar los temas y que, “por seguridad”, tampoco se permita instalar plugins como Dark Reader
      El problema es que el resultado se ve muy feo y cansa la vista para los demás. Y ahora es peor porque ya no podemos usar Dark Reader. Todo está en negrita y parece estar gritando, así que incluso se vuelve más difícil distinguir qué es importante. No compré una pantalla de 4,7 millones de colores para ver solo 10 colores. Con contrastes muy altos suelo tener dolor de cabeza, así que prefiero temas suaves como Solarized
      El 0,5% de los empleados con problemas visuales podría recibir suficiente ayuda con plugins de navegador que ajusten la experiencia según su problema. No todas las dificultades visuales son iguales. Algunas personas no pueden ver ciertas combinaciones de colores, así que hay que evitarlas o modificarlas; otras ven borroso, así que necesitan texto grande, quizá mucho más grande que el actual. A alguien que no ve en absoluto esto tampoco le sirve, necesita un display braille y buenos textos alternativos para imágenes. Pero en la empresa parecen no preocuparse por eso, solo por lo que salta a la vista
      Antes teníamos una firma de correo discreta, y ahora te la ponen en la cara con colores de jardín de infantes y letras gigantes. Y eso que es información que nadie lee de todos modos. Había una razón para enfatizarla menos: que supieras que estaba ahí si la necesitabas, pero que no era información importante. Si realmente querías leerla, podías seleccionarla, o cambiar a modo de texto plano
      No estoy en absoluto en contra de apoyar a las personas con discapacidad, pero quisiera ver un enfoque más personalizado. No me gusta la idea de arreglar una cosa rompiéndosela a todos los demás. Yo tampoco uso mi teléfono en modo de letras gigantes, pero me parece bien que esa función exista para quien la necesite
    • Sobre el contraste, me pregunto si te refieres al área de muestras de color
      Si es así, esos valores de color pequeños tienen un propósito más visual que informativo, y en el repositorio los valores están en un formato fácil de leer. Por ejemplo, nadie querría leer más de un párrafo de texto naranja claro sobre un fondo naranja

  • La expresión combinación de colores me confunde
    Para mí, una combinación de colores significa unos pocos colores que armonizan bien entre sí, como Monokai. También tiene usos claros y sencillos, como el resaltado de sintaxis en editores de código
    Esto parece una lista con muchísimos tonos de una misma familia, y no sé cómo se supone que deba usarse. No lo digo para criticarlo; de verdad me confunde

    • Esto es parecido a la forma en que Tailwind ofrece una paleta de colores completa que se puede usar en desarrollo de UI
      Tener varios niveles de luminosidad del mismo color da flexibilidad para crear elementos de UI que se sienten de la misma familia y combinan bien entre sí. Por ejemplo, si quieres usar un borde azul en una tarjeta azul, puedes usar un azul más claro para el fondo y un azul más oscuro para el borde
      En lugar de aplicar transparencia a un borde negro, cada nivel de luminosidad de esta paleta se eligió individualmente para que armonice dentro de la misma familia de color. Otra ventaja es que se puede garantizar que cada “nivel de luminosidad” sea consistente entre colores. Un gris al 50% queda en una posición similar a un rojo al 50%
      En términos más generales, cada color aquí está diseñado para combinar bien con todos los demás. No puede ser cualquier color; tienen que armonizar entre sí
    • Sería más preciso llamarlo paleta de colores
    • Personalmente también creo que debieron decir “paleta de colores”. Ejemplos similares son:
      Open Color de OpenProps https://yeun.github.io/open-color/
      La paleta de colores de Tailwind https://tailwindcss.com/docs/colors
      Desde el punto de vista del diseño, elegir una paleta de colores puede ser muy difícil manteniendo buenos puntajes de contraste de color y otros criterios de accesibilidad. Una paleta estandarizada es útil porque hace ese trabajo por ti. Uso con frecuencia las paletas de OC o Tailwind, pero muchas veces les faltan las familias de color que quiero, así que tener tres opciones como esta está bastante bien
    • Me resulta igual de incomprensible que, en la práctica, una lista de cajas de colores reciba 476 puntos

  • Esta paleta no parece perceptualmente uniforme
    Es decir, la relación de contraste entre cada tinte y el blanco/negro no es la misma en todos los colores. Me pregunto si la analizaron en https://huetone.ardov.me/

  • Me pregunto por qué esto es una combinación de colores para amantes de internet

    • Me gusta internet y también me gustan los colores geniales. Espero no ser el único ;)

  • Si comparas los números entre sí, el azul se ve mucho más vivo y opaco que los otros colores
    Al comparar los cinco niveles lado a lado, el azul resalta como eléctrico, mientras que los demás colores parecen tener un tinte
    Claro que dependerá de la gamma del monitor y del perfil de color, pero me pregunto si la intención era que cada número se viera como un tinte similar respecto al color puro. Ahora parece más un sistema parecido a RGB/CMYK con otra notación que una implementación del Munsell Color System que crea equivalencia perceptual según la escala de intensidad del color

    • No necesariamente
      No llegué a estos colores con ninguna fórmula; simplemente los ajusté a ojo hasta que me parecieron bien

  • Lo estoy viendo en Firefox para Android y solo veo texto negro sobre fondo blanco
    Me pregunto si se supone que debería verse algo más

    • Usa anidamiento de CSS[1]. Piensa en algo como SCSS. Para soporte completo se necesita Firefox 117 y Chrome 120[2]
      [1] https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_sel...
      [2] https://caniuse.com/css-nesting
    • En Firefox de escritorio en Linux pasa lo mismo, incluso con JavaScript activado
      Edit: al parecer usa Oklab/oklch() [1], que supuestamente funciona desde Firefox 113, pero en 115 no parece funcionar. O quizá algún otro elemento lo está rompiendo
      [1] https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...
    • Si al desplazarte hacia abajo no ves varios conjuntos de muestras de color agrupados por luminosidad, entonces no lo estás viendo correctamente
      En mi Firefox funciona bien, pero no uso Android
    • En Firefox 50 en Linux pasa lo mismo
      No sé cómo llamar a la gente que ignora la compatibilidad hacia atrás. Mi sitio funciona incluso en IE6 si hace falta
    • En Chromium para PC también pasa lo mismo

  • No uso Tailwind, pero he estado usando la paleta de Tailwind para este tipo de cosas
    https://tailwindcss.com/docs/colors

    • Hay que tener cuidado. Tailwind volvió a cambiar los colores entre las versiones 3 y 4, y esta ya es la tercera vez
      Para decirlo claramente, al actualizar una biblioteca CSS a la última versión no debería cambiar sutilmente todo el tema de colores del sitio, pero en la práctica eso pasa
      Por eso empecé a pasarme a Radix Colors

  • Aunque no hay un requisito fuerte de que la saturación sea consistente entre colores, para mi gusto se ve un poco irregular
    El amarillo oscuro y el naranja se sienten un poco demasiado deslavados
    La paleta en general es buena. En especial me gusta que evite el rojo “rojo”. Creo que es un color que muchos diseñadores detestan. Me gustaría ver algún estudio sobre la relación entre el color de ojos y las preferencias de color
    Una dirección similar, pero con más familias de colores: https://www.s-ings.com/scratchpad/oklch-smooth/

    • El amarillo y el naranja sí que son complicados
      Gracias por el enlace; esas familias de colores se ven realmente bien