0
# Color Utilities
1

2
Color manipulation, interpolation, and conversion functions optimized for React Native animations with support for both string and numeric color representations.
3

4
## Capabilities
5

6
### Color Types
7

8
```typescript { .api }
9
/**
10
 * Represents an animated color value
11
 * Can be a color string (hex, rgb, etc.) or numeric color
12
 */
13
type AnimatedColor = string | number;
14
```
15

16
### Color Interpolation
17

18
```typescript { .api }
19
/**
20
 * Interpolate between two colors
21
 * @param value - Interpolation factor (0 to 1)
22
 * @param color1 - Start color
23
 * @param color2 - End color
24
 * @param colorSpace - Color space for interpolation (default: "RGB")
25
 * @returns Interpolated color
26
 */
27
function mixColor(
28
  value: number,
29
  color1: AnimatedColor,
30
  color2: AnimatedColor,
31
  colorSpace?: "RGB" | "HSV"
32
): AnimatedColor;
33
```
34

35
**Usage Example:**
36

37
```typescript
38
import { mixColor } from "react-native-redash";
39
import { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
40

41
const progress = useSharedValue(0);
42

43
const animatedStyle = useAnimatedStyle(() => ({
44
  backgroundColor: mixColor(
45
    progress.value,
46
    "#ff0000", // Red
47
    "#0000ff", // Blue
48
    "RGB"
49
  )
50
}));
51

52
// HSV interpolation for more natural color transitions
53
const hsvStyle = useAnimatedStyle(() => ({
54
  backgroundColor: mixColor(
55
    progress.value,
56
    "#ff0000",
57
    "#00ff00",
58
    "HSV" // Goes through yellow instead of brown
59
  )
60
}));
61
```
62

63
### Color Brightness Detection
64

65
```typescript { .api }
66
/**
67
 * Determine if color is light based on luminance
68
 * @param r - Red component (0-255)
69
 * @param g - Green component (0-255)
70
 * @param b - Blue component (0-255)
71
 * @returns True if color is light, false if dark
72
 */
73
function isLight(r: number, g: number, b: number): boolean;
74
```
75

76
**Usage Example:**
77

78
```typescript
79
import { isLight, red, green, blue } from "react-native-redash";
80

81
const colorValue = 0xff5733ff; // Some color
82
const r = red(colorValue);
83
const g = green(colorValue);
84
const b = blue(colorValue);
85

86
const textColor = isLight(r, g, b) ? "black" : "white";
87
```
88

89
### HSV to RGB Conversion
90

91
```typescript { .api }
92
/**
93
 * Convert HSV color values to RGB
94
 * @param h - Hue (0 to 1)
95
 * @param s - Saturation (0 to 1)
96
 * @param v - Value/Brightness (0 to 1)
97
 * @returns RGB color object with r, g, b values (0-255)
98
 */
99
function hsv2rgb(h: number, s: number, v: number): {
100
  r: number;
101
  g: number;
102
  b: number;
103
};
104
```
105

106
**Usage Example:**
107

108
```typescript
109
import { hsv2rgb } from "react-native-redash";
110
import { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
111

112
const hue = useSharedValue(0);
113

114
const animatedStyle = useAnimatedStyle(() => {
115
  const { r, g, b } = hsv2rgb(
116
    hue.value, // Hue (0 to 1)
117
    1.0,       // Full saturation
118
    1.0        // Full brightness
119
  );
120
  
121
  return {
122
    backgroundColor: `rgb(${r}, ${g}, ${b})`
123
  };
124
});
125

126
// Animate hue for rainbow effect
127
import { withRepeat, withTiming } from "react-native-reanimated";
128

129
useEffect(() => {
130
  hue.value = withRepeat(withTiming(1, { duration: 2000 }), -1, false);
131
}, []);
132
```
133

134
### Color Component Extraction
135

136
Extract individual color components from numeric color values.
137

138
```typescript { .api }
139
/**
140
 * Extract opacity/alpha component from color
141
 * @param color - Numeric color value
142
 * @returns Opacity value (0 to 1)
143
 */
144
function opacity(color: number): number;
145

146
/**
147
 * Extract red component from color
148
 * @param color - Numeric color value
149
 * @returns Red value (0 to 255)
150
 */
151
function red(color: number): number;
152

153
/**
154
 * Extract green component from color
155
 * @param color - Numeric color value
156
 * @returns Green value (0 to 255)
157
 */
158
function green(color: number): number;
159

160
/**
161
 * Extract blue component from color
162
 * @param color - Numeric color value
163
 * @returns Blue value (0 to 255)
164
 */
165
function blue(color: number): number;
166
```
167

168
**Usage Example:**
169

170
```typescript
171
import { opacity, red, green, blue, isLight } from "react-native-redash";
172

173
// Extract components from numeric color (ARGB format)
174
const color = 0xff5733aa; // Semi-transparent orange
175

176
const a = opacity(color); // ~0.67 (170/255)
177
const r = red(color);     // 87
178
const g = green(color);   // 51  
179
const b = blue(color);    // 170
180

181
// Use for dynamic styling
182
const brightness = isLight(r, g, b);
183
const contrastColor = brightness ? "black" : "white";
184

185
// Create variations
186
const lighterColor = `rgba(${r}, ${g}, ${b}, ${a * 0.5})`;
187
const solidColor = `rgb(${r}, ${g}, ${b})`;
188
```
189

190
**Complete Color Animation Example:**
191

192
```typescript
193
import React, { useEffect } from "react";
194
import { View, StyleSheet } from "react-native";
195
import {
196
  mixColor,
197
  hsv2rgb,
198
  isLight,
199
  red,
200
  green,
201
  blue
202
} from "react-native-redash";
203
import Animated, {
204
  useSharedValue,
205
  useAnimatedStyle,
206
  withRepeat,
207
  withTiming,
208
  useDerivedValue
209
} from "react-native-reanimated";
210

211
export const ColorfulBox = () => {
212
  const progress = useSharedValue(0);
213
  const hue = useSharedValue(0);
214
  
215
  useEffect(() => {
216
    // Animate between colors
217
    progress.value = withRepeat(
218
      withTiming(1, { duration: 3000 }),
219
      -1,
220
      true
221
    );
222
    
223
    // Rotate through hue spectrum
224
    hue.value = withRepeat(
225
      withTiming(1, { duration: 5000 }),
226
      -1,
227
      false
228
    );
229
  }, []);
230
  
231
  // Mix between predefined colors
232
  const mixedStyle = useAnimatedStyle(() => ({
233
    backgroundColor: mixColor(
234
      progress.value,
235
      "#ff6b6b", // Red
236
      "#4ecdc4", // Teal
237
      "HSV"
238
    )
239
  }));
240
  
241
  // HSV color wheel
242
  const hsvStyle = useAnimatedStyle(() => {
243
    const { r, g, b } = hsv2rgb(hue.value, 0.8, 0.9);
244
    return {
245
      backgroundColor: `rgb(${r}, ${g}, ${b})`
246
    };
247
  });
248
  
249
  // Dynamic text color based on background
250
  const dynamicTextColor = useDerivedValue(() => {
251
    const { r, g, b } = hsv2rgb(hue.value, 0.8, 0.9);
252
    return isLight(r, g, b) ? "black" : "white";
253
  });
254
  
255
  const textStyle = useAnimatedStyle(() => ({
256
    color: dynamicTextColor.value
257
  }));
258
  
259
  return (
260
    <View style={styles.container}>
261
      <Animated.View style={[styles.box, mixedStyle]}>
262
        <Animated.Text style={[styles.text, { color: "white" }]}>
263
          Mixed Colors
264
        </Animated.Text>
265
      </Animated.View>
266
      
267
      <Animated.View style={[styles.box, hsvStyle]}>
268
        <Animated.Text style={[styles.text, textStyle]}>
269
          HSV Rainbow
270
        </Animated.Text>
271
      </Animated.View>
272
    </View>
273
  );
274
};
275

276
const styles = StyleSheet.create({
277
  container: {
278
    flex: 1,
279
    justifyContent: "center",
280
    alignItems: "center",
281
    gap: 20
282
  },
283
  box: {
284
    width: 200,
285
    height: 100,
286
    borderRadius: 10,
287
    justifyContent: "center",
288
    alignItems: "center"
289
  },
290
  text: {
291
    fontSize: 16,
292
    fontWeight: "bold"
293
  }
294
});
295
```
296

297
**Performance Tips:**
298

299
- Use `mixColor` for smooth color transitions between keyframes
300
- Use `HSV` color space for more natural color transitions
301
- Extract color components once and reuse for multiple calculations
302
- Use `isLight` to automatically choose contrasting text colors
303
- Prefer `hsv2rgb` for creating color wheels and gradients