Using color picker in Blender, and copying hex and rgb to ThreeJS but the colors aren't the same?

[silence_dogood]

Problem: copying rgb and hex value into threejs result in different colors when using Blender’s color picker. Even though ThreeJS is configured to (1) be in sRGB color space, and (2) to convert the gamma corrected hex into linear-sRGB space, and (3) no tonemapping.

I’m assuming that either (1) I don’t understand color spaces well enough or (2) I have missed some configuration that is causing it to not behave correctly or (3) there’s a bug in Blender or ThreeJS (unlikely)

• I’m viewing a png image in sRGB color space in Blender’s Texture Painter image viewer

• I use Blender’s color picker to sample a color in the image

• I copy the RGB value and the hex value into my ThreeJS project. The RGB value is (.537,.992,.984) and the hex is 0x89FDFB

According to Blender docs, the color picker’s hex value is gamma corrected: Color Picker - Blender 4.2 Manual

Here is an image from Blender:

Here is the ThreeJS code:

const color = new THREE.Color().setHex(0x89FDFB,THREE.SRGBColorSpace);
const color2 = new THREE.Color().setRGB(.537, .992, .984);

return (
<>
{/* the 'flat' argument removes tonemapping*/}
<Canvas flat>
<mesh>
<boxGeometry />
<meshBasicMaterial color={color}/>
</mesh>

<mesh position={[2,2,0]}>
<boxGeometry />
<meshBasicMaterial color={color2} />
</mesh>

</Canvas>
</>
)

Versions:

• Blender 4.2.3

• react-three/fiber 8.17.8

• react-three/postprocessing 2.16.3

• three 0.168.0

[donmccurdy]

Do you have tone mapping turned off in Blender, as well? It’s on by default, they call it the “view transform”, where “standard” is similar to turning tone mapping off in three.js. Other than that, it sounds like you’ve got the color spaces correct.

Alternatively three.js also supports AgX, Blender’s default tone mapping. Might not be a 100% perfect match, but should be much closer than what you’re seeing now. It’s low contrast by default, and generally is best used alongside some color grading.

[silence_dogood]

I’m using AgX tone mapping in Blender, but it shouldn’t affect the image when viewing it in the Texture Painter. According to blender docs the tone mapping is only applied when viewing renders, or when “view as render” is enabled (but it’s disabled for me): https://docs.blender.org/manual/en/latest/render/color_management.html#:~:text=these%20two%20settings%3A-,View%20as%20Render,-Display%20the%20image

[donmccurdy]

Here’s a JSFiddle:

three.js hex / rgb color example - JSFiddle - Code Playground

It looks like the RGB triplet you provided is sRGB (assuming it’s meant to match the hex code), but three.js and Blender both assume that RGB triplets are in the working color space, Linear-sRGB.

The equivalent Linear-sRGB RGB triplet would be .25, .982, .965 or you can specify that the RGB triplet is sRGB with:

color.setRGB(.537, .992, .984, THREE.SRGBColorSpace);