ค่าฐานสิบหก ARGB โปร่งใส


160

สีในนี้ตารางเป็นสิ่งที่ไม่โปร่งใส ผมคิดว่าค่าสำหรับการตั้งค่าที่จะAFF

รหัสเพื่อความโปร่งใสคืออะไร?

ตัวอย่างเช่นสีนี้ FFF0F8FF (AliceBlue) เป็นรหัสโปร่งใสเช่น??F0F8FF?


ในที่สุดก็มีวิธีการตั้งค่าสีโปร่งใสด้วยรหัสฐานสิบหกสำหรับเบราว์เซอร์บางอย่าง (คุณสมบัติใหม่) โปรดดูstackoverflow.com/a/60876347/2457251
Almir Campos

คำตอบ:


199

ความโปร่งใสถูกควบคุมโดยช่องสัญญาณอัลฟา ( AAใน#AARRGGBB) ค่าสูงสุด (255 dec, FF hex) หมายถึงทึบแสงเต็มที่ ค่าต่ำสุด (0 Dec, 00 hex) หมายถึงโปร่งใสทั้งหมด ค่าในระหว่างนั้นกึ่งโปร่งใสนั่นคือสีผสมกับสีพื้นหลัง

เพื่อให้ได้สีที่โปร่งใสอย่างสมบูรณ์ตั้งค่าอัลฟาเป็นศูนย์ RR, GGและBBไม่เกี่ยวข้องในกรณีนี้เพราะสีจะไม่สามารถมองเห็นได้ ซึ่งหมายความว่า#00FFFFFF("โปร่งใสขาว") เป็นสีเดียวกับ#00F0F8FF("โปร่งใส AliceBlue") เพื่อให้ง่ายหนึ่งเลือกสีดำ ( #00000000) หรือสีขาว ( #00FFFFFF) ถ้าสีไม่สำคัญ

ในตารางที่คุณเชื่อมโยงกับการที่คุณจะพบตามที่กำหนดไว้Transparent#00FFFFFF


2
สมมติว่าฉันต้องการความทึบแสง 50% รหัสสำหรับสีขาวที่มีความทึบ 50% / โปร่งใสคืออะไร
user3332579

10
@ user3332579: 50% 7Fคือ วางเครื่องคิดเลขของคุณในโหมด hex มันจะทำเคล็ดลับสำหรับคุณ
theHacker

1
@ user3332579: ดังนั้น 50% #7FFFFFFFสีขาว
theHacker

6
รูปแบบที่เป็น #RRGGBBAA Hex8 (หรือ #RGBA ใน Hex4) และไม่ #AARRGGBB (หรือ #ARGB) ฉันมีการทดสอบใน Chrome 62,63,64 อ้างถึงCanIUse.com , https://css-tricks.com/8- หลักฐานสิบหก / รหัส , Chrome สถานะคุณสมบัติ
เอสจีเอ Sandhu

3
@SGSSandhu คำถามไม่ได้ถูกกำหนดเป้าหมายที่ CSS ดูคำถามอีกครั้งรูปแบบคือ ARGB
theHacker

506

นี่คือตาราง% ถึงค่า hex:

ตัวอย่าง : สำหรับ 85% #D9FFFFFFสีขาวคุณจะใช้ ที่นี่ 85% = "D9" & White = "FFFFFF"


100% — FF
95% — F2
90% — E6

85% — D9

80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00

มันคำนวณอย่างไร

FF คือตัวเลขที่เขียนในโหมด hex ตัวเลขนั้นแสดงถึง 255 ในรูปทศนิยม ตัวอย่างเช่นหากคุณต้องการ 42% ในการคำนวณคุณจำเป็นต้องค้นหา 42% ของผู้ที่มีตำแหน่ง 255 และแปลงจำนวนนั้นเป็นฐานสิบหก 255 * 0.42 ~ = 107 107 ถึง hex คือ "6B - maleta


3
คุณคำนวณได้อย่างไร
Saeed Jassani

35
@SaeedJassani FF คือตัวเลขที่เขียนในโหมด hex ตัวเลขนั้นแสดงถึง 255 ในรูปทศนิยม ตัวอย่างเช่นหากคุณต้องการ 42% ในการคำนวณคุณจำเป็นต้องค้นหา 42% ของ numbeer 255 และแปลงตัวเลขนั้นเป็น hex 255 * 0.42 ~ = 107 107 ถึง hex คือ "6B"
maleta

1
@ Maleta ขอบคุณมาก
Saeed Jassani

10

การเพิ่มคำตอบอื่น ๆ และทำอะไรมากกว่าสิ่งที่ @Maleta อธิบายในความคิดเห็นในhttps://stackoverflow.com/a/28481374/1626594ทำอัลฟา * 255 แล้วรอบแล้วฐานสิบหก นี่คือตัวแปลงด่วนhttp://jsfiddle.net/8ajxdLap/4/

function rgb2hex(rgb) {
  var rgbm = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?((?:[0-9]*[.])?[0-9]+)[\s+]?\)/i);
  if (rgbm && rgbm.length === 5) {
    return "#" +
      ('0' + Math.round(parseFloat(rgbm[4], 10) * 255).toString(16).toUpperCase()).slice(-2) +
      ("0" + parseInt(rgbm[1], 10).toString(16).toUpperCase()).slice(-2) +
      ("0" + parseInt(rgbm[2], 10).toString(16).toUpperCase()).slice(-2) +
      ("0" + parseInt(rgbm[3], 10).toString(16).toUpperCase()).slice(-2);
  } else {
    var rgbm = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
    if (rgbm && rgbm.length === 4) {
      return "#" +
        ("0" + parseInt(rgbm[1], 10).toString(16).toUpperCase()).slice(-2) +
        ("0" + parseInt(rgbm[2], 10).toString(16).toUpperCase()).slice(-2) +
        ("0" + parseInt(rgbm[3], 10).toString(16).toUpperCase()).slice(-2);
    } else {
      return "cant parse that";
    }
  }
}

$('button').click(function() {
  var hex = rgb2hex($('#in_tb').val());
  $('#in_tb_result').html(hex);
});
body {
  padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Convert RGB/RGBA to hex #RRGGBB/#AARRGGBB:<br>
<br>
<input id="in_tb" type="text" value="rgba(200, 90, 34, 0.75)"> <button>Convert</button><br>
<br> Result: <span id="in_tb_result"></span>



1

หากคุณมีค่าฐานสิบหกของคุณและคุณเพียงแค่สงสัยว่าค่าของอัลฟาจะเป็นเช่นไรตัวอย่างนี้อาจช่วย:

const alphaToHex = (alpha => {
  if (alpha > 1 || alpha < 0 || isNaN(alpha)) {
    throw new Error('The argument must be a number between 0 and 1');
  }
  return Math.ceil(255 * alpha).toString(16).toUpperCase();
})

console.log(alphaToHex(0.45));

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.