dimsemenov/TinyColor là dự án mã nguồn mở trên GitHub, viết chủ yếu bằng JavaScript, với 3 sao. Fast, small color manipulation and conversion for JavaScript
Tóm tắt dựng từ metadata GitHub của chính dự án — chưa có bài review TopGit. Trang sẽ tự động cập nhật khi bài review đầy đủ được xuất bản.
VÌ SAO CHƯA CÓ REVIEW
TopGit viết bài đầy đủ cho repo có nhiều sao nhất và được yêu cầu nhiều nhất. Trang này là snapshot trong thời gian chờ — xem README gốc ở tab READ ME.
TinyColor is a small, fast library for color manipulation and conversion in JavaScript. It allows many forms of input, while providing color conversions and other color utility functions. It has no dependencies.
Including in a browser
Download tinycolor.js or install it with bower:
bower install tinycolor
Then just include it in the page in a script tag:
<script type='text/javascript' src='tinycolor.js'></script>
<script type='text/javascript'>
var color = tinycolor("red");
</script>
Including in node
tinycolor may also be included as a node module like so:
npm install tinycolor2
Then it can be used in your script like so:
var tinycolor = require("tinycolor2");
var color = tinycolor("red");
Usage
Call tinycolor(input) or new tinycolor(input), and you will have an object with the following properties. See Accepted String Input and Accepted Object Input below for more information about what is accepted.
Accepted String Input
The string parsing is very permissive. It is meant to make typing a color as input as easy as possible. All commas, percentages, parenthesis are optional, and most input allow either 0-1, 0%-100%, or 0-n (where n is either 100, 255, or 360 depending on the value).
HSL and HSV both require either 0%-100% or 0-1 for the S/L/V properties. The H (hue) can have values between 0%-100% or 0-360.
RGB input requires either 0-255 or 0%-100%.
If you call tinycolor.fromRatio, RGB and Hue input can also accept 0-1.
Returns the format used to create the tinycolor instance
var color = tinycolor("red");
color.getFormat(); // "name"
color = tinycolor({r:255, g:255, b:255});
color.getFormat(); // "rgb"
getOriginalInput
Returns the input passed into the constructer used to create the tinycolor instance
var color = tinycolor("red");
color.getOriginalInput(); // "red"
color = tinycolor({r:255, g:255, b:255});
color.getOriginalInput(); // "{r: 255, g: 255, b: 255}"
isValid
Return a boolean indicating whether the color was successfully parsed. Note: if the color is not valid then it will act like black when being used with other methods.
var color1 = tinycolor("red");
color1.isValid(); // true
color1.toHexString(); // "#ff0000"
var color2 = tinycolor("not a color");
color2.isValid(); // false
color2.toString(); // "#000000"
getBrightness
Returns the perceived brightness of a color, from 0-255, as defined by Web Content Accessibility Guidelines (Version 1.0).
var color1 = tinycolor("#fff");
color1.getBrightness(); // 255
var color2 = tinycolor("#000");
color2.getBrightness(); // 0
isLight
Return a boolean indicating whether the color's perceived brightness is light.
var color1 = tinycolor("#fff");
color1.isLight(); // true
var color2 = tinycolor("#000");
color2.isLight(); // false
isDark
Return a boolean indicating whether the color's perceived brightness is dark.
var color1 = tinycolor("#fff");
color1.isDark(); // false
var color2 = tinycolor("#000");
color2.isDark(); // true
getLuminance
Returns the perceived luminance of a color, from 0-1 as defined by Web Content Accessibility Guidelines (Version 2.0).
var color1 = tinycolor("#fff");
color1.getLuminance(); // 1
var color2 = tinycolor("#000");
color2.getLuminance(); // 0
getAlpha
Returns the alpha value of a color, from 0-1.
var color1 = tinycolor("rgba(255, 0, 0, .5)");
color1.getAlpha(); // 0.5
var color2 = tinycolor("rgb(255, 0, 0)");
color2.getAlpha(); // 1
var color3 = tinycolor("transparent");
color3.getAlpha(); // 0
setAlpha
Sets the alpha value on a current color. Accepted range is in between 0-1.
var color = tinycolor("red");
color.getAlpha(); // 1
color.setAlpha(.5);
color.getAlpha(); // .5
color.toRgbString(); // "rgba(255, 0, 0, .5)"
String Representations
The following methods will return a property for the alpha value, which can be ignored: toHsv, toHsl, toRgb
toHsv
var color = tinycolor("red");
color.toHsv(); // { h: 0, s: 1, v: 1, a: 1 }
toHsvString
var color = tinycolor("red");
color.toHsvString(); // "hsv(0, 100%, 100%)"
color.setAlpha(0.5);
color.toHsvString(); // "hsva(0, 100%, 100%, 0.5)"
toHsl
var color = tinycolor("red");
color.toHsl(); // { h: 0, s: 1, l: 0.5, a: 1 }
toHslString
var color = tinycolor("red");
color.toHslString(); // "hsl(0, 100%, 50%)"
color.setAlpha(0.5);
color.toHslString(); // "hsla(0, 100%, 50%, 0.5)"
toHex
var color = tinycolor("red");
color.toHex(); // "ff0000"
toHexString
var color = tinycolor("red");
color.toHexString(); // "#ff0000"
toHex8
var color = tinycolor("red");
color.toHex8(); // "ff0000ff"
toHex8String
var color = tinycolor("red");
color.toHex8String(); // "#ff0000ff"
toRgb
var color = tinycolor("red");
color.toRgb(); // { r: 255, g: 0, b: 0, a: 1 }
toRgbString
var color = tinycolor("red");
color.toRgbString(); // "rgb(255, 0, 0)"
color.setAlpha(0.5);
color.toRgbString(); // "rgba(255, 0, 0, 0.5)"
toPercentageRgb
var color = tinycolor("red");
color.toPercentageRgb() // { r: "100%", g: "0%", b: "0%", a: 1 }
toPercentageRgbString
var color = tinycolor("red");
color.toPercentageRgbString(); // "rgb(100%, 0%, 0%)"
color.setAlpha(0.5);
color.toPercentageRgbString(); // "rgba(100%, 0%, 0%, 0.5)"
toName
var color = tinycolor("red");
color.toName(); // "red"
toFilter
var color = tinycolor("red");
color.toFilter(); // "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff0000,endColorstr=#ffff0000)"
toString
Print to a string, depending on the input format. You can also override this by passing one of "rgb", "prgb", "hex6", "hex3", "hex8", "name", "hsl", "hsv" into the function.
desaturate: function(amount = 10) -> TinyColor. Desaturate the color a given amount, from 0 to 100. Providing 100 will is the same as calling greyscale.
spin: function(amount = 0) -> TinyColor. Spin the hue a given amount, from -360 to 360. Calling with 0, 360, or -360 will do nothing (since it sets the hue back to what it was before).
Use the values in your own calculations, or use one of the convenience functions below.
isReadable
isReadable: function(TinyColor, TinyColor, Object) -> Boolean. Ensure that foreground and background color combinations meet WCAG guidelines. Object is optional, defaulting to {level: "AA",size: "small"}. level can be "AA" or "AAA" and size can be "small" or "large".
Here are links to read more about the AA and AAA requirements.
mostReadable: function(TinyColor, [TinyColor, Tinycolor ...], Object) -> Boolean.
Given a base color and a list of possible foreground or background colors for that base, returns the most readable color.
If none of the colors in the list is readable, mostReadable will return the better of black or white if includeFallbackColors:true.
dimsemenov/TinyColor có 3 sao GitHub — tải lại trang để xem số mới nhất, hoặc xem trực tiếp github.com/dimsemenov/TinyColor. TopGit phản chiếu số sao của GitHub nhưng không cam kết đến từng phút.
dimsemenov/TinyColor có tag gì không?
Bản đồng bộ chưa ghi nhận topic GitHub nào cho dimsemenov/TinyColor. GitHub topics hiển thị ở thanh bên phải trang repo — đó là nơi đáng kiểm tra nhất.
dimsemenov/TinyColor có trang demo không?
Dự án có trang chủ ở http://bgrins.github.com/TinyColor/. Tab "Readme" ở trang này thường có ảnh chụp và hướng dẫn bắt đầu nhanh.
dimsemenov/TinyColor còn đang phát triển không?
Commit gần nhất trên dimsemenov/TinyColor là 8.7 năm trước (theo timestamp GitHub). Repo có 1 fork — một chỉ báo về mức độ quan tâm của cộng đồng.
dimsemenov/TinyColor dùng license gì?
dimsemenov/TinyColor phát hành theo license MIT. Nên mở file LICENSE trên GitHub để xác nhận — license metadata đôi khi lệch với thực tế dự án.
dimsemenov/TinyColor viết bằng ngôn ngữ gì?
dimsemenov/TinyColor chủ yếu viết bằng JavaScript. Trường "language" của GitHub dựa trên phần lớn byte ở nhánh mặc định.
Đọc thêm về dimsemenov/TinyColor ở đâu?
Trang TopGit này là một snapshot — tab "Readme" hiển thị nguyên văn README của repo (đã bỏ link, giữ ảnh). Repo GitHub ở github.com/dimsemenov/TinyColor là nguồn chính thức.
Đọc đầy đủ README ở tab phía trên.
TinyColor có đáng để bạn bỏ thời gian?
ChatGPT, Claude và Perplexity đều đọc được trang này. Hỏi thử xem họ nghĩ gì về TinyColor.
/TinyColor