Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including glslify-hex with all npm packages installed. Try it out:

var glslifyHex = require("glslify-hex")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

glslify-hex v2.1.1

A transform stream for [glslify]( that replaces CSS-style hexadecimal colors with `vec3/vec4` definitions.

glslify-hex experimental

A transform stream for glslify that replaces CSS-style hexadecimal colors with vec3/vec4 definitions.



Once you've enabled the stream, you simply put your hex colors in your file like so:

void main() {
  gl_FragColor = vec4(#ff0000, 1.0);

The above color will be (naïvely) replaced with a GLSL vec3 definition, i.e.:

void main() {
  gl_FragColor = vec4(vec3(1.0, 0.0, 0.0), 1.0);

You can also use 8-digit hexadecimals for vec4 definitions. The above example could also be expressed like so:

void main() {
  gl_FragColor = #ff0000ff;

To use glslify transform streams, you currently need to use glslify-stream directly:

var createStream = requrire('glslify-stream')

var stream = createStream('./shader.vert', {
  transform: ['glslify-hex']


This might have changed by the time you read this though, so be sure to double check the glslify documentation!


MIT. See for details.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free