# Line 22: Type 'number' is not assignable to type 'RGB'

**URL:** <https://forum.makecode.com/t/line-22-type-number-is-not-assignable-to-type-rgb/11964>\
**Category:** Help\
**Tags:** graphics-and-math, extension\
**Created:** [January 31, 2022, 6:56pm UTC](https://forum.makecode.com/t/line-22-type-number-is-not-assignable-to-type-rgb/11964 "2022-01-31T18:56:21Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![hasanchik](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/hasanchik/32/5885_2.png) [@hasanchik](https://forum.makecode.com/u/hasanchik)\
**Post date:** [January 31, 2022, 6:56pm UTC](https://forum.makecode.com/t/line-22-type-number-is-not-assignable-to-type-rgb/11964/1 "2022-01-31T18:56:21Z")

</div>

Hi, so i was messing around with the fade color extension, and because its so usefull for handling colors and doing color math, i thought it would be a good idea to use this to my advantage to automatically create a “water” pallette:

```auto
let waterPalettes: color.RGB[] = []
let ogPalettes: number[][] = [
    [0, 0, 0],
    [255, 255, 255],
    [255, 33, 33],
    [255, 147, 196],
    [255, 129, 53],
    [255, 246, 9],
    [36, 156, 163],
    [20, 220, 82],
    [0, 63, 173],
    [35, 242, 255],
    [142, 46, 196],
    [164, 131, 159],
    [92, 64, 108],
    [229, 205, 196],
    [145, 70, 61],
    [0, 0, 0],
]

for (let i = 0; i < 16; i++) {
    waterPalettes[i] = color.rgb(ogPalettes[i][0], ogPalettes[i][1], ogPalettes[i][2])
    //waterPalletes[i] = color.rgb(1,1,1)
}

let waterPalette = color.rgbArrayToPalette(waterPalettes)

```

But for some reason, i have this error, that just wont go. I dont know why. Its a simple error so i thought somebody may know why this happens:  
**Line 22: Type ‘number’ is not assignable to type ‘RGB’.**  
Ive tried looking into the extensions source code, several times, changing things around a bit, but it still happens everytime.  
I hope you can help me.

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [January 31, 2022, 6:59pm UTC](https://forum.makecode.com/t/line-22-type-number-is-not-assignable-to-type-rgb/11964/2 "2022-01-31T18:59:06Z")

</div>

Try changing line 122 from

```auto
    waterPalettes[i] = color.rgb(ogPalettes[i][0], ogPalettes[i][1], ogPalettes[i][2])

```

to

```auto
    waterPalettes[i] = new color.RGB(ogPalettes[i][0], ogPalettes[i][1], ogPalettes[i][2])

```

---

<div class="post-metadata">

**Author:** ![jwunderl](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jwunderl/32/5308_2.png) [@jwunderl](https://forum.makecode.com/u/jwunderl)\
**Post date:** [January 31, 2022, 7:01pm UTC](https://forum.makecode.com/t/line-22-type-number-is-not-assignable-to-type-rgb/11964/3 "2022-01-31T19:01:44Z")

</div>

^^ Yeah Richard’s right / that’s the fix, sorry for the bad javascript name for that color.rgb function - it’s one that converts an rgb triplet → a packed hex, not an RGB object, and I only intended to use it internally so I didn’t revise my bad naming on it D:

---

<div class="post-metadata">

**Author:** ![hasanchik](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/hasanchik/32/5885_2.png) [@hasanchik](https://forum.makecode.com/u/hasanchik)\
**Post date:** [January 31, 2022, 7:15pm UTC](https://forum.makecode.com/t/line-22-type-number-is-not-assignable-to-type-rgb/11964/4 "2022-01-31T19:15:58Z")

</div>

> [@richard](#):
>
> ```auto
> waterPalettes[i] = new color.RGB(ogPalettes[i][0], ogPalettes[i][1], ogPalettes[i][2])
> 
> ```

Thanks for the quick response, but i was gonna use this palette as a buffer (did i sentence that correctly?) and now this happens:

```auto
let waterPoints: number[][] = []
let waterPalettes: color.RGB[] = []
let ogPalettes: number[][] = [
    [0, 0, 0],
    [255, 255, 255],
    [255, 33, 33],
    [255, 147, 196],
    [255, 129, 53],
    [255, 246, 9],
    [36, 156, 163],
    [20, 220, 82],
    [0, 63, 173],
    [35, 242, 255],
    [142, 46, 196],
    [164, 131, 159],
    [92, 64, 108],
    [229, 205, 196],
    [145, 70, 61],
    [0, 0, 0],
]

for (let i = 0; i < 16; i++) {
    waterPalettes[i] = new color.RGB(ogPalettes[i][0], ogPalettes[i][1], ogPalettes[i][2])
    //waterPalletes[i] = color.rgb(1,1,1)
}

let waterPalette = color.createBuffer(color.rgbArrayToPalette(waterPalettes))
/*
function wave(x0: number, y0: number, x1: number, y1: number) {
    let dx = Math.abs(x1 - x0);
    let dy = Math.abs(y1 - y0);
    let sx = (x0 < x1) ? 1 : -1;
    let sy = (y0 < y1) ? 1 : -1;
    let err = dx - dy;
    for (let i = 0; i < 40; i++) {
*/
        let x0 = 1;
        let y0 = 1; 

        screen.mapRect(x0, y0, 1, 160, waterPalette)

```

**Line 34: Argument of type ‘Palette’ is not assignable to parameter of type ‘number[]’. Property ‘push’ is missing in type ‘Palette’.**

**Line 49: Argument of type ‘ColorBuffer’ is not assignable to parameter of type ‘Buffer’. Property ‘concat’ is missing in type ‘ColorBuffer’.**

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [January 31, 2022, 7:25pm UTC](https://forum.makecode.com/t/line-22-type-number-is-not-assignable-to-type-rgb/11964/5 "2022-01-31T19:25:28Z")

</div>

Ah, I think you’re confusing the purpose of mapRect.

mapRect is used to map colors from the current palette to another color in the current palette; the buffer should be exactly 16 bytes long and each byte should contain a number between 0-15.

For example, let’s say you have an image with these pixels:

```auto
2 2 3 3 4 4
2 2 3 3 4 4

```

This would be an image with three squares: red, pink, and orange. Now let’s say I’m using a mapRect buffer with bytes that looks like this:

```auto
values:
[0, 0, 4, 3, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
bytes:
0x00 0x00 0x04 0x03 0x02 0x00 0x00 0x00 0x00 0x00 0x00 0x00 0x00 0x00 0x00 0x00

```

If I were to call mapRect on that image, the output would be the three squares in reverse order (orange, pink, red). That’s because mapRect will replace every pixel with the color in the corresponding index in the buffer; thus: 2 → 4, 3 → 3, and 4 → 2. All other colors will be replaced with 0.

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [January 31, 2022, 7:29pm UTC](https://forum.makecode.com/t/line-22-type-number-is-not-assignable-to-type-rgb/11964/6 "2022-01-31T19:29:15Z")

</div>

You can’t use mapRect to change a color to be a color that isn’t already in the palette. It only maps colors from one index to another.

---

<div class="post-metadata">

**Author:** ![hasanchik](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/hasanchik/32/5885_2.png) [@hasanchik](https://forum.makecode.com/u/hasanchik)\
**Post date:** [January 31, 2022, 7:35pm UTC](https://forum.makecode.com/t/line-22-type-number-is-not-assignable-to-type-rgb/11964/7 "2022-01-31T19:35:14Z")

</div>

Ohh, i understand now. what i was going for was transparent water, like that shader extension you made

but your extension had a new palette right? how did you do that??

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [January 31, 2022, 7:55pm UTC](https://forum.makecode.com/t/line-22-type-number-is-not-assignable-to-type-rgb/11964/8 "2022-01-31T19:55:38Z")

</div>

The shader extension doesn’t actually have a new palette!

It just maps to darker colors in the original palette. Here’s the mapping:

![Screen Shot 2022-01-31 at 11.55.01 AM](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/0/016f55375251aceb3edb299679754f199cb52ce2.png)

each row is one shade darker

---

<div class="post-metadata">

**Author:** ![hasanchik](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/hasanchik/32/5885_2.png) [@hasanchik](https://forum.makecode.com/u/hasanchik)\
**Post date:** [January 31, 2022, 8:12pm UTC](https://forum.makecode.com/t/line-22-type-number-is-not-assignable-to-type-rgb/11964/9 "2022-01-31T20:12:30Z")

</div>

Thanks alot! I also never thought of storing the palette in a image, thats pretty clever.

---

<div class="post-metadata">

**Author:** ![hasanchik](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/hasanchik/32/5885_2.png) [@hasanchik](https://forum.makecode.com/u/hasanchik)\
**Post date:** [February 1, 2022, 5:30pm UTC](https://forum.makecode.com/t/line-22-type-number-is-not-assignable-to-type-rgb/11964/10 "2022-02-01T17:30:23Z")

</div>

If its not too much to ask, could you also show me how to turn a string to a hex value?

example:

```auto
let hexString : string = "2000102030405060708090A0B0C0D0E0F"

let Buffer : Buffer = HexStringToHex(hexString)

```

**for some reason** hex() errors with !!proc || !bin.finalPass when i try this:

```auto
console.log(hex("000102030405060708090A0B0C0D0E0F"))

```

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [February 2, 2022, 6:05pm UTC](https://forum.makecode.com/t/line-22-type-number-is-not-assignable-to-type-rgb/11964/11 "2022-02-02T18:05:41Z")

</div>

@hasanchik hex is a special function called a template string; you call it like this:

```auto
hex`000102030405060708090A0B0C0D0E0F`

```

no parentheses and backticks instead of quotes

---

<div class="post-metadata">

**Author:** ![hasanchik](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/hasanchik/32/5885_2.png) [@hasanchik](https://forum.makecode.com/u/hasanchik)\
**Post date:** [February 2, 2022, 8:29pm UTC](https://forum.makecode.com/t/line-22-type-number-is-not-assignable-to-type-rgb/11964/12 "2022-02-02T20:29:18Z")

</div>

i know, but i cant put a variable in like this:

```auto
let hexString : string = "2000102030405060708090A0B0C0D0E0F"

let Buffer : Buffer = hex`hexString` //How do i do this part?

```

hexstring is already a string that is hex… if that makes any sense

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [February 2, 2022, 8:45pm UTC](https://forum.makecode.com/t/line-22-type-number-is-not-assignable-to-type-rgb/11964/13 "2022-02-02T20:45:51Z")

</div>

@hasanchik you can’t do that. The hex function is only for defining buffers at _compile time_, not _runtime_.

But, you can write your own function to do this. Or just use this one I just wrote:

```auto
function hexStringToBuffer(hex: string) {
    const buf = control.createBuffer(hex.length / 2);
    for (let i = 0; i < hex.length; i += 2) {
        buf.setUint8(i / 2, parseInt(hex.substr(i, 2), 16));
    }
    return buf;
}

```

---

<div class="post-metadata">

**Author:** ![hasanchik](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/hasanchik/32/5885_2.png) [@hasanchik](https://forum.makecode.com/u/hasanchik)\
**Post date:** [February 2, 2022, 10:39pm UTC](https://forum.makecode.com/t/line-22-type-number-is-not-assignable-to-type-rgb/11964/14 "2022-02-02T22:39:55Z")

</div>

> [@richard](#):
>
> ```auto
> function hexStringToBuffer(hex: string) {
> const buf = control.createBuffer(hex.length / 2);
> for (let i = 0; i < hex.length; i += 2) {
> buf.setUint8(i / 2, parseInt(hex.substr(i, 2), 16));
> }
> return buf;
> }
> 
> ```

Thanks!!! I’d never be able to figure out that! I just started doing typescript

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [February 2, 2022, 11:08pm UTC](https://forum.makecode.com/t/line-22-type-number-is-not-assignable-to-type-rgb/11964/15 "2022-02-02T23:08:57Z")

</div>

No worries! Let me know if you have any questions about the code